How to get value from JSON object using index in Angular

Question

I have a configuration like the following in the component file :

  public status: any = {
    PRG: "In Progress",
    COMP: "Completed",
    FAIL: "Failed",
  };

Now in the template file I have a loop and in there, the status is coming as one of the field. I am trying to access value from status like the following:

<tr *ngFor="let item of items">
    <td>{{ config[item.status] }}</td>
</tr>

But I am not getting any value here. How to access the value from JSON object ?

UPDATE: My items looks like the following:

[
   {
      "id":3,
      "description":"Description",
      "status":"COMP",
      "user_id":"user2"
   },
   {
      "id":4,
      "description":"Description",
      "status":"INPRG",
      "user_id":"user2"
   }
]

and the HTML looks like the following :

<div class="d-flex arm-release_status badge{{configurations[item.status]}}">
      <p>{{status[item.status]}}</p>
</div>

See here: https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor — qqilihq, Jun 27 '20 at 07:28
@Sajeetharan it's just an array of objects. I have updated the question — Happy Coder, Jun 27 '20 at 07:38
It's working fine https://stackblitz.com/edit/angular-dqpyjo?file=src/app/app.component.ts — Sajeetharan, Jun 27 '20 at 07:38
then its not an issue with the values , post your complete HTML — Sajeetharan, Jun 27 '20 at 07:46
I am already using the value once to specify the color. The HTML is something like this : `

{{status[release.release_status]}}

` — Happy Coder, Jun 27 '20 at 07:47
@Sajeetharan why is your example demo print only one of them even there are two elements ? — mr. pc_coder, Jun 27 '20 at 07:49
you are doing silly mistakes , my code print only value because values you provided in the items and status dont match. 2nd you are just using in the class which wont work — Sajeetharan, Jun 27 '20 at 07:52

score 0 · Answer 1 · answered Jun 27 '20 at 11:58

You are using a config property that doesn't seem to exist, use status instead.

<tr *ngFor="let item of items">
  <td>{{ status[item.status] }}</td>
</tr>

PS: To also add a class use something like

<div [ngClass]='"badge-"+status[item.status].toLowerCase()'>
      <p>{{status[item.status]}}</p>
</div>

How to get value from JSON object using index in Angular

1 Answers1