Getting keys and values from json in Angular

Question

I need to get values from json (comes from merged MySQL tables).

I've tried a several solutions from previous topic but none of them worked for me.

access key and value of object using *ngFor

my JSON format is:

[
   {
      "idemployee":1,
      "name":"Ernest",
      "surename":"Pająk",
      "role":"Obsługa Baru",
      "employeehours":[
         {
            "idemployeehours":1,
            "date":"2019-01-10T23:00:00.000+0000",
            "quantity":8.0
         }
      ]
   }
]

and what I got is "Key: 0 and Value: " (answer from Pardeep Jain topic above)

EDIT: this is my code:

<div *ngFor="let item of employee| keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>

employee comes from Angular component and gives mentioned JSON. The problem is getting nested values from "employeehours" (like quantity)

Please give a minimal reproducible example of how you adapted the existing answers to your specific problem. — jonrsharpe
– jonrsharpe, Commented Apr 27, 2019 at 16:55
The link you mention is for iterating object properties (key,value) but according to your data you have plain array of objects. Is that correct? — robert
– robert, Commented Apr 27, 2019 at 16:59
well, employeehours is an array too, so why would you need to use keyvalue? — AVJT82
– AVJT82, Commented Apr 27, 2019 at 18:20
Yes, it's array of objects. I don't know if I need to use keyvalue, I just need to put values from "employeehours" (like quantity) to table. — Klose
– Klose, Commented Apr 28, 2019 at 0:12

Muhammed Albarmavi · Accepted Answer · 2019-04-27 18:48:45Z

2

if you run keyValue pipe on array object you got the keys as the index of the values in the array so tha why you need a nested ngFor to run keyvalue pipe on the value of the array

<div *ngFor="let item of employee">
    <div *ngFor="let emp of item |keyvalue "> 
        Key: <b>{{emp.key}}</b> and Value: <b>{{emp.value}}</b>
  </div>
</div>

demo 🔥🔥

UPDATED!

if you want to support sohow keys value of employeehours where the value is array best cases here to create a component to do all of this and use this component to render the new values like recursion

component

export class RenderComponent  {

  @Input() items = [];

  isArray(value) {
    return value instanceof Array
  }
}

template

<div *ngFor="let item of items">
    <div *ngFor="let obj of item | keyvalue " class="well"> 
        Key: <b>{{obj.key}}</b> and Value: <b>{{obj.value}}</b>

        <ng-container *ngIf="isArray(obj.value)">
            <render [items]="obj.value"></render>
        </ng-container>

  </div>
</div>

demo 💣💣

edited Apr 27, 2019 at 18:48

answered Apr 27, 2019 at 18:19

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

1 Comment

Klose Over a year ago

How about getting only requested values like "quantity" (all from the array) not the every value from object?

AVJT82 · Accepted Answer · 2019-04-28 11:32:53Z

1

You don't need the keyvalue pipe. employeehours is an array, so you just need a nested *ngFor for the array, so example where you have stored your data in an employees array:

<div *ngFor="let emp of employees">
  <p>Name: {{emp.name}} {{emp.surename}}</p>
  <div *ngFor="let hour of emp.employeehours">
    <p>Date: {{hour.date | date: 'shortDate'}}</p>
    <p>Quantity: {{hour.quantity}}</p>
  </div>
</div>

DEMO

answered Apr 28, 2019 at 11:32

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

1 Comment

Klose Over a year ago

Thank you ! That was the move

Collectives™ on Stack Overflow

Getting keys and values from json in Angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related