0

I've got an object from server and i want to read this within ionic2 typescript.

my Question:

How i can read this Object for each key getting their value ?

Example:

ionic list with header : in this case Header = key1 , key2 , key3 and the value is the values of every key

Header = key1
items1
items1
items1
Header2 = key2
items2
items2
items2..

The Object :

{
    "status": "success",
    "products": {
        "Key1": [
            {
              "entity_id": "448",
              "sku": "587",
              "name": "name",
              "image_url": "587.png",
              "price": "15,000",
              "qty": 0,
              "rating": 0,
              "wishlist": false,
              "specialprice": "7,500",
              "brand": "brandname"
            }
        ],
        "Key2": [
            {
              "entity_id": "448",
              "sku": "587",
              "name": "name",
              "image_url": "587.png",
              "price": "15,000",
              "qty": 0,
              "rating": 0,
              "wishlist": false,
              "specialprice": "7,500",
              "brand": "brandname"
            }
        ],
        "Key3": [
            {
              "entity_id": "448",
              "sku": "587",
              "name": "name",
              "image_url": "587.png",
              "price": "15,000",
              "qty": 0,
              "rating": 0,
              "wishlist": false,
              "specialprice": "7,500",
              "brand": "brandname"
            }
        ],
    }
}
Mahmoud Ismail
  • 1,617
  • 4
  • 27
  • 51

1 Answers1

3

To print "Key" array in *ngFor loop, first write one Pipes

Pipe.ts

import { Component,Pipe, PipeTransform, Injectable } from '@angular/core';

@Pipe({
  name: 'objectValues'
})

@Injectable()
export class ObjectValuesPipe implements PipeTransform {
  transform(obj: any) {
    let result = [];
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        result.push(obj[key]);
      }
    }
    return result;
  }
}

do not forget to import your Pipes in @NgModule, than you can use this pipe like this.

<ul *ngFor="let item of items">
   <li *ngFor="let value of item | objectValues">
     {{ value }}
   </li>
 </ul>

Based On : How to display json object using *ngFor and access key,value of object

Community
  • 1
  • 1
Mahmoud Ismail
  • 1,617
  • 4
  • 27
  • 51