Accessing indexed item from array in HTMLBars

Question

I have a custom API that is not formatted for easy use with Ember Data. I'm having trouble getting the value of nested array properties from my api.

api response:

{
  "data": [
    {
      "id": 6,
      "name": "Company Name",
      "links": [
        {
          "rel": "self",
          "uri": "/address-book/company-name"
        }
      ],
      "details": {
        "data": {
          "website_url": "http://website.com/",
          "development_website_url": "http://dev_website.com",
          "primary_phone": 9543333333,
          "primary_email": "email@emai.email"
        }
      }
    },
    {
      "id": 3,
      "name": "Company Name",
      "links": [
        {
          "rel": "self",
          "uri": "/address-book/company-name"
        }
      ],
      "details": {
        "data": {
          "website_url": "http://website.com/",
          "development_website_url": "http://dev_website.com",
          "primary_phone": 9543333333,
          "primary_email": "email@emai.email"
        }
      }
    }
  ]
}

I'm trying to get the links displayed here is my handlebars:

{{#each m in model}}
    <tr>
        <td>
            <a href="{{m.links.uri}}">{{m.name}}</a>
        </td>
    </tr>
{{/each}}

Now the link uri is just blank. If I change it to just {{m.links}} that return {object object}. I've also tried {{m.links[0].uri}} just to see if that would work but no good.

Here is my router and the adapter used for it.

export default Ember.Route.extend({
    model: function(){
        var adapter = AddressBookAdapter.create();
        var companies =  adapter.findAll();
        return companies;

    }
});

adapter:

export default Ember.Object.extend({
    findAll: function(){
        return ajax('http://localhost:8000/api/v1/address-book/companies?includes=details')
            .then(function(response){
                return response.data;
            });
    }
});

How can I get the value of these properties? I feel like it's really easy and I'm just not getting it.

I am not an Ember guy but shouldn't it be more like this... https://gist.github.com/jrgleason/ec1725d153374f317520 also see http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — Jackie, May 07 '15 at 01:48
I'm just saying I don't think the return response.data is returning when you think it is. I think the promise is resolving and you then there is running independent of your then on the returned value. — Jackie, May 08 '15 at 03:18

score 0 · Accepted Answer · answered May 07 '15 at 20:18

To access element at specific index of array in template, you should use syntax {{array.[index]}}

According to your api response, this should probably work:

{{#each m in model}}
    <tr>
        <td>
            <a href="{{m.links.[0].uri}}">{{m.name}}</a>
        </td>
    </tr>
{{/each}}

Accessing indexed item from array in HTMLBars

1 Answers1