CODEWITHSUNDEEP
angular
Skrub Coder
Skrub Coder

Reputation: 17

Can't access array that's in an Object

So I have this:

<div *ngIf="(foods$ | async)| json as foods"> <pre>{{foods}}<br></pre></div>

Which prints out this:

{"foods": [
{
  "name": "1",
  "fat": "2"
},
{
  "name": "2",
  "fat": "3"
},
{
  "name": "3",
  "fat": "4"
},
{
  "name": "4",
  "fat": "5"
}

] }

And when I try to do this:

<div *ngIf="(foods$ | async)| json as foods"> <pre>{{foods.name}} {{foods.fat}}<br></pre</div>

I get this: TS2339: Property 'name' does not exist on type 'string'.

{{foods.name}}{{foods.fat}}

Property 'fat' does not exist on type 'string'.

{{foods.name}}{{foods.fat}}

It's foods$ is an observable and when I remove "| json" I get [object Object]

what I'm trying to access is .name and .fat, to put it into a table like this: enter image description here

Here's what I get in my console log btw: enter image description here

So Again, i'm trying to use angular to display my data in a table

Thanks

Upvotes: 0

Views: 339

Answers (1)

David Kidwell
David Kidwell

Reputation: 720

foods.name doesn't exist because foods contains an array, not a name field. Each element in the array contains a name value but to access those names you need to specify which element's name you want. Like this,

foods[i].name

Where i is the index of the element that you want to select. For instance foods[0].name will return the name of the first food in the list.

To list all of the elements in your array you can use an *ngFor to iterate over all the elements in the array,

<div *ngFor="let food of (foods$ | async)">
  <p>{{ food.name }} : {{ food.fat }}</p>
</div>

This will loop over all the elements in foods and for each food in foods it will create a p tag with that food's name and fat values.

To put those values in a table, just replace the p tag with your table row.

Upvotes: 1

Related Questions