How to display JSON nested array in ember templates using handlebars - json

Question

my json api from server is
{
taxonomies:[
{
id:2,
name:"Brand",
root:{
id:2,
name:"Brand",
pretty_name:"Brand",
permalink:"brand",
parent_id:null,
taxonomy_id:2,
taxons:[
{
id:8,
name:"Ruby",
pretty_name:"Brand -> Ruby",
permalink:"brand/ruby",
parent_id:2,
taxonomy_id:2
},
{
id:9,
name:"Apache",
pretty_name:"Brand -> Apache",
permalink:"brand/apache",
parent_id:2,
taxonomy_id:2
},
{
id:10,
name:"Spree",
pretty_name:"Brand -> Spree",
permalink:"brand/spree",
parent_id:2,
taxonomy_id:2
},
{
id:11,
name:"Rails",
pretty_name:"Brand -> Rails",
permalink:"brand/rails",
parent_id:2,
taxonomy_id:2
}
]
}
}
]
}
and i want to display taxons -> pretty_name in my handlebars template
{{#each}} only show bullets but not the data
I dont know how to loop over the array.
{{taxonomy.root.taxons.firstObject.pretty_name}} displays the name but only the first object of each taxon and not all of them
<ul>
{{#each taxonomy in controller}}
{{#each}}
<li>{{taxonomy.root.taxons.pretty_name}}</li>
{{/each}}
{{/each}}
</ul>
How can I get the data?

Answer 1

Your JSON does not conform to Ember's JSON Conventions as descbribed at http://emberjs.com/guides/models/connecting-to-an-http-server/ and in more details at http://emberjs.com/api/data/classes/DS.RESTAdapter.html. This means your options are:
Change your JSON API to return JSON consistent with the Ember Data conventions
Write your own Adapter that extends DS.RESTAdapter that reads your JSON as listed above
For Option 1, just modify your server to return JSON that adheres to the conventions above. If this is possible for you, this is usually the easiest method.
For Option 2, you'll want to define a new adapter either on a per-model basis, or for the entire application. Then, you'll want to override this function: http://emberjs.com/api/data/classes/DS.RESTSerializer.html#method_extractArray
See the sample code they have on that link for how to do this.