Dynamic object key to display *ngFor in Nativescript with Angular

Question

I have the dataset which has derived from the group by product name as below. I need to iterate the array of object and display the product name with all the size of the product.

Sample dataset

   [ {
  "TEST 1": [
    {
      "content_id": "88282",
      "product_name": "TEST 1",
      "price": "36.00",
      "size" : "XL"
    },
    {
      "content_id": "88283",
      "product_name": "TEST 1",
      "price": "37.00",
      "size" : "XXL"
    }
  }],

{
  "TEST 2": [
    {
      "content_id": "882821",
      "product_name": "TEST 2",
      "price": "36.00",
      "size" : "XL"
    },
    {
      "content_id": "882832",
      "product_name": "TEST 2",
      "price": "37.00",
      "size" : "XXL"
    }]
]

I need to iterate the above result and need to display as Product name with all sizes such as "TEST 1 (XL XXL ) and TEST 2 (XL XXL)

What I am trying is

<----- need to display here --------->

There is already a thread with nice examples https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor — Manoj, Oct 03 '18 at 06:09

score 2 · Accepted Answer · answered Oct 02 '18 at 23:12

You can use Object.keys() to get keys or use foreach() to iterate json. E.g.

const object1 = {"data":
        [ {  "TEST 1": [    {
      "content_id": "88282",
      "product_name": "TEST 1",
      "price": "36.00",
      "size" : "XL"
    },    {
      "content_id": "88283",
      "product_name": "TEST 1",
      "price": "37.00",
      "size" : "XXL"
    }
  ]
}
]


};

object1[Object.keys(object1)[0]].forEach(function(element) {
  console.log(element);
});

Dynamic object key to display *ngFor in Nativescript with Angular

1 Answers1