How to get the object value that is inside multiple arrays using angular and typescript?

Question

I need help getting the item and color value of each of the array inside the total array

This is an example of my json

 "results ": {
"totals": {
  "total": [
    {
      "item": "car",
      "color": "red"
    },
    {
      "item": "car",
      "color": "white"
    },
    {
      "item": "bike",
      "color": "green"
    }
  ]
},

This is the typescript code I'm using the get the item and color from my json response

  let i = 0;
         this .items = response.results.totals.total.forEach((x)=>
              {
                this .item = x.item ;
                this .color = x.color;
               i++
              }

HTML

 <pre><strong>Item</strong>{{item}}</pre>
  <pre><strong>Color</strong>{{color}}</pre>

When I run my code I'm only able to display the first array inside the total array

Items : car 
Color: red

How I can get all the values inside the total array and display in my page using html so my output look like this ?

Items : car
Color: red
Items : car
Color: white
Items : bike
Color: green

You are not looping in your html as far as I can see, also not sure if just a typo in SO but you shouldn't have spaces after this for example (this. item) — Dylan Anlezark
– Dylan Anlezark, Commented Aug 10, 2020 at 22:18
Would recommend an *ngfor loop then you won't even need to create a loop in your typescript — Dylan Anlezark
– Dylan Anlezark, Commented Aug 10, 2020 at 22:20

andsilver · Accepted Answer · 2020-08-10 21:14:40Z

1

this.items = response.results.totals.total;

Set the this.items as the array of the items you want to display.

And use ngFor for displaying the items in html:

<div *ngFor="let item of items">
  <pre><strong>Item</strong>{{item.item}}</pre>
  <pre><strong>Color</strong>{{item.color}}</pre>
</div>

answered Aug 10, 2020 at 21:14

andsilver

6,0323 gold badges22 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

How to get the object value that is inside multiple arrays using angular and typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related