# Problem with the belongsTo relationship for a controller

**URL:** <https://discuss.emberjs.com/t/problem-with-the-belongsto-relationship-for-a-controller/18922>\
**Category:** Ember Data\
**Created:** [June 14, 2021, 9:43pm UTC](https://discuss.emberjs.com/t/problem-with-the-belongsto-relationship-for-a-controller/18922 "2021-06-14T21:43:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tanfa\_LDW](https://avatars.discourse-cdn.com/v4/letter/t/e47c2d/32.png) [@Tanfa\_LDW](https://discuss.emberjs.com/u/Tanfa_LDW)\
**Post date:** [June 14, 2021, 9:43pm UTC](https://discuss.emberjs.com/t/problem-with-the-belongsto-relationship-for-a-controller/18922/1 "2021-06-14T21:43:52Z")

</div>

I’m having a problem using the belongsTo relationship in my call model file. I want to have the file element in the call model point to a file and be able to access the elements present in the file model. The file element in the call model was originally only the object id for that particular file. ![screenshot-call-model-06:14](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/7/4/74b54128e772e3e5748c98be129d2702797badfc.png)

The call model

![screenshot-file-model-06:14](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/0/a/0a0a305e0b6b35fc9864a17b1abd50905e6c4795.png)

The file model

The issue I’m having is that I don’t know how to access the content of the file model in the call controller. I understand that call.file on line 9 in the controller is returning a promise, but I don’t know how to deal with this since I’m having to loop through individual calls. If I use something like “call.file.filename” on line 9, it returns as undefined.

The call controller file

 ![screenshot-timeline-controller-06:14](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/6/3/6372a53bb87d60ca10c5508363c2cd02113327ee.png)

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [June 15, 2021, 3:01am UTC](https://discuss.emberjs.com/t/problem-with-the-belongsto-relationship-for-a-controller/18922/2 "2021-06-15T03:01:06Z")

</div>

Relationships in Ember Data are async by default, so they will return a promise when you reference them. This means that you have to treat them as async when “reading” them, so to use the results of the promise you have to wait until the promise has resolved (even if that’s right away).

When you get an async relationship (e.g. `call.file`) you may be triggering an async fetch, so you have to behave as if you are always dealing with an async fetch. If the relationship has already been fetched the promise will simply resolve immediately. But either way you still have to deal with the promise. That means a computed property like this will have to return a promise.

If you’re using relationships in a regular function you can make the function async and use async/await syntax:

```auto
async function getFileSize() {
  let calls = this.model.calls;
  let firstCall = calls[0[;
  let firstFile = firstCall.file;
  // now firstFile is a regular model not a promise because has been resolved with await
  return firstFile.size;
}

```

IIRC you can’t use async/await with getters so you’d have to do it the old-fashioned promise chain way:

```auto
async function getFileSize() {
  let calls = this.model.calls;
  let firstCall = calls[0[;
  return firstCall.file.then(file => {
    // now firstFile is a regular model not a promise because has been resolved with promise.then
    return file.size;
  });
}

```

You can also reference the proxy value of the relationship e.g. `file.call.content` if you know the relationship has been loaded.

If you know the data will already be loaded every time you can make the relationship synchronous which means you don’t have to deal with promises at all.

---

<div class="post-metadata">

**Author:** ![Tanfa\_LDW](https://avatars.discourse-cdn.com/v4/letter/t/e47c2d/32.png) [@Tanfa\_LDW](https://discuss.emberjs.com/u/Tanfa_LDW)\
**Post date:** [June 15, 2021, 9:54pm UTC](https://discuss.emberjs.com/t/problem-with-the-belongsto-relationship-for-a-controller/18922/3 "2021-06-15T21:54:59Z")

</div>

For some reason, using calls[0] returns undefined even though calls is an array.

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [June 16, 2021, 3:27pm UTC](https://discuss.emberjs.com/t/problem-with-the-belongsto-relationship-for-a-controller/18922/4 "2021-06-16T15:27:48Z")

</div>

Maybe stick a breakpoint in and see what it is? I can’t really tell what it’s supposed to be from the code.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [June 16, 2021, 3:33pm UTC](https://discuss.emberjs.com/t/problem-with-the-belongsto-relationship-for-a-controller/18922/5 "2021-06-16T15:33:12Z")

</div>

It might be an array proxy, in which case try `calls.objectAt(0)`. Or convert it to a real array first with `calls.toArray()`.