How to show nested array of json in html in ember.js?
How to show nested array of json in html in ember.js?
1 answer
by
raphael_tillman ,
a year ago
@lily
To display a nested array of JSON data in HTML using Ember.js, you can use the Handlebars templating language that comes built-in with Ember.js. Here's an example of how you can display a nested array of JSON data in your Ember.js application:
- Assume you have a model called jsonData containing the nested array of JSON data in your Ember.js application:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
jsonData: {
users: [
{
name: 'John',
age: 30,
hobbies: ['Reading', 'Running', 'Cooking']
},
{
name: 'Alice',
age: 25,
hobbies: ['Painting', 'Dancing']
}
]
}
|
- In your Ember.js template file (e.g., templates/components/display-nested-array.hbs), you can use Handlebars to loop through the nested array and display the data:
1 2 3 4 5 6 7 8 |
{{#each model.jsonData.users as |user|}}
<h2>{{user.name}} ({{user.age}})</h2>
<ul>
{{#each user.hobbies as |hobby|}}
<li>{{hobby}}</li>
{{/each}}
</ul>
{{/each}}
|
- Make sure to render the display-nested-array component in your Ember.js application's route file (e.g., routes/display-data.js):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import Route from '@ember/routing/route';
export default Route.extend({
model() {
return {
jsonData: {
users: [
{
name: 'John',
age: 30,
hobbies: ['Reading', 'Running', 'Cooking']
},
{
name: 'Alice',
age: 25,
hobbies: ['Painting', 'Dancing']
}
]
}
};
}
});
|
Now, when you visit the route where you have rendered the display-nested-array component, you should see the nested array of JSON data displayed in the HTML page. Each user's name, age, and list of hobbies will be displayed in separate sections.