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 [mcve] of how you adapted the existing answers to your specific problem. — jonrsharpe, Apr 27 '19 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, Apr 27 '19 at 16:59
well, `employeehours` is an array too, so why would you need to use `keyvalue`? — AT82, Apr 27 '19 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, Apr 28 '19 at 00:12

Muhammed Albarmavi · Answer 1 · 2019-04-27T18:48:45.653

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

How about getting only requested values like "quantity" (all from the array) not the every value from object? — Klose, Apr 28 '19 at 08:33

score 1 · Accepted Answer · answered Apr 28 '19 at 11:32

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 '19 at 11:32

AT82

71,416
24
140
167

1

Thank you ! That was the move – Klose May 07 '19 at 20:33

Getting keys and values from json in Angular

2 Answers2