CODEWITHSUNDEEP
jsonangular
Klose
Klose

Reputation: 33

Getting keys and values from json in Angular

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)

Upvotes: 2

Views: 11209

Answers (2)

AVJT82
AVJT82

Reputation: 73347

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

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

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 💣💣

Upvotes: 2

Related Questions