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

Member

by lily , in category: Javascript , 9 months ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raphael_tillman , 7 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.

Related Threads:

How to show json in html?
How to create nested array json using php?
How to update the nested array in json using oracle?
How to create nested array json using php?
How to extract keys in a nested json array object in presto?
How to put data into nested array and bind it to html in knockout.js?