Read inner JSON with typescript in an Angular application

Question

I am learning and get always struggle with same problems. I want to load a list from my json file. The problem is that the json is not like this:

[{ "id":"1"},{ "id":"2"}]

Instead of this I have more complex lists like:

[{"data":[{"id":"1"},{"id":"2"}]}]

and even more rows inside. If I do subscribe in angular like this:

getCustomersList()
    .subscribe(
      data => { 
        this.consolelist = data[0].data;
      });

I always get output of whole file and have to do ngfor in template, or even sometimes ngfor in ngfor. Isn't it possible to build a new array like new = []; and read only data[0].data inside? How is this handled? Is my thinking wrong and do I always have to build this way, with ngFor in the template?

Are there any tutorials which explain it, or something like this?

So just to make sure I'm following, are you wanting to render the whole nested object array, but differently? Or just grab an index of the first level of the array and loop through the second level based on the index you want? If you want both then the nested ngFor is the best way to go. — Stephen Romero
– Stephen Romero, Commented Sep 24, 2020 at 20:16
why not just make a few handler functions that'll unpack and flatten out the list for you? — Mike Tung
– Mike Tung, Commented Sep 24, 2020 at 20:18

Tony Brasunas · Accepted Answer · 2020-09-25 07:04:30Z

1

You can use .forEach(), .map(), or any other Array function for this.

You should not have to rely on your template for excessive processing of your data.

You can start with an empty array with [] as well, as you indicated. For instance, if your data comes in like this:

[{
  "data":[
   {"id":"1", "name": "Tom"},
   {"id":"2", "name": "Dick"},
   {"id":"3", "name": "Harry"},
   {"id":"4", "name": "Rumplestiltskin"}
  ]
}]

You can do this, using .forEach():

getCustomersList()
    .subscribe(
      data => { 
        this.consolelist = [];
        const customers = data[0].data;
        customers.forEach(customer => {
          /* Take any data you like for each customer here */
          this.consolelist.push(customer.name);
        });
     });

And that will do it. You will have an array inside your component that is custom created for use by your template.

Here your this.consolelist array will be simply ['Tom', 'Dick', 'Harry', 'Rumplestiltskin']. You will still need to use something like ngFor to display the customers in the template, but it should be much simpler since you've pulled out and formatted exactly the data from the API response that you need.

edited Sep 25, 2020 at 7:04

answered Sep 24, 2020 at 21:33

Tony Brasunas

4,6613 gold badges48 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SaschaK Over a year ago

Thanks, this is way I was searching for. In my app ther is a pagination at nearly all requests. Allways get struggeling with data inside. Now I do it this way.

Tony Brasunas Over a year ago

Great, glad this will be helpful

Collectives™ on Stack Overflow

Read inner JSON with typescript in an Angular application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related