How to show nested array of json in html in ember.js?

Member

by lily , in category: Javascript , 4 months ago

How to show nested array of json in html in ember.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raphael_tillman , 2 months 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:

  1. 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']
    }
  ]
}


  1. 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}}


  1. 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.