Getting nested properties in json api


#1

I have a custom API that does is not formatted how Emberjs would like so I need to use custom adapters. I’m having trouble getting the value of nested 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 and the details displayed here is my handlebars:

{{#each m in model}}
	<tr>
		<td>
			<a href="{{m.links.uri}}">{{m.name}}</a>
			<div class="">
				{{#each detail in m.details}}
					<p><strong>Website: </strong>{{detail.website_url}}</p>
				{{/each}}
			</div>
		</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. Now as far as the details go it gives me the error that it can’t loop over an object only arrays. The reason that I’m using a loop is because {{m.details.website_url}} didn’t work so I was trying out different ways.

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;

	}
});

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.


#2

It seems that links is an array, so you’d need to iterate over it using an {{#each link in m.links}}