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

Question

I want to display the below data from Server in ionic 2. and access key and value of object using *ngFor.

i want to display this object dynamically using *ngFor. how to get it ?

Is there a simpler solution to this problem because I feel that it would be really common for developers using Angular2 to display such json data.

{
    "status": "success",
    "products": {
        "Admiranda": [
            {
                "entity_id": "448",
                "sku": "587",
                "name": "# Adm Ape Maia EDT 50 ml 75009 (9)",
                "image_url": "/path/media/catalog/product/cache/5/8/587.png",
                "url_key": "/path/adm-ape-maia-edt-50-ml-75009-9",
                "price": "15,000",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "7,500",
                "brand": "Admiranda"
            },
            {
                "entity_id": "435",
                "sku": "571",
                "name": "# Adm Aveng Liquid Soap 300ml 73680(3)",
                "image_url": "/path/media/catalog/product/cache/5/7/571.png",
                "url_key": "/path/adm-aveng-liquid-soap-300ml-73680-3",
                "price": "5,000",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "2,500",
                "brand": "Admiranda"
            }
        ],
        "Weider": [
            {
                "entity_id": "306",
                "sku": "386",
                "name": "32 % Whey Wafer bar choco 35 g",
                "image_url": "/path/media/catalog/product/cache/3/2/32_whey_wafer.png",
                "url_key": "/path/32-whey-wafer-bar-choco-35-g",
                "price": "5,910",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "3,842",
                "brand": "Weider"
            },
            {
                "entity_id": "337",
                "sku": "650",
                "name": "52% Protein Bar Cherry-Yog 50g",
                "image_url": "/path/media/catalog/product/cache/5/2/52_protein_2.png",
                "url_key": "/path/52-protein-bar-cherry-yog-50g",
                "price": "6,819",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "4,432",
                "brand": "Weider"
            }
        ],
        "Yoomi": [
            {
                "entity_id": "303",
                "sku": "638",
                "name": "5oz feeding bottle+slow flow teat (2 of)",
                "image_url": "/path/media/catalog/product/cache/6/3/638.png",
                "url_key": "/path/5oz-feeding-bottle-slow-flow-teat-2-of",
                "price": "30,909",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "21,636",
                "brand": "Yoomi"
            }
        ],
        "Cosmetic products": [
            {
                "entity_id": "519",
                "sku": "736",
                "name": "Bebble Body cream",
                "image_url": "/path/media/catalog/product/cache/b/e/bebble_body_cream_175_ml.736_1.png",
                "url_key": "/path/bebble-body-cream",
                "price": "20,909",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "10,455",
                "brand": "Cosmetic products"
            },
            {
                "entity_id": "517",
                "sku": "734",
                "name": "Bebble Body milk",
                "image_url": "/path/media/catalog/product/cache/b/e/bebble_body_milk_200_ml.734.png",
                "url_key": "/path/bebble-body-milk",
                "price": "18,182",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "9,091",
                "brand": "Cosmetic products"
            }
        ],
        "Dialfa": [
            {
                "entity_id": "483",
                "sku": "184",
                "name": "Dialfa HK LipStick Amber 1955 (3)",
                "image_url": "/path/media/catalog/product/cache/4/_/4_1.png",
                "url_key": "/path/dialfa-hk-lipstick-amber-1955-3",
                "price": "4,500",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "2,250",
                "brand": "Dialfa"
            },
            {
                "entity_id": "495",
                "sku": "323",
                "name": "Dlf  Lip Balm Cindrella 0859 (3)",
                "image_url": "/path/media/catalog/product/cache/1/2/12.png",
                "url_key": "/path/dlf-lip-balm-cindrella-0859-3",
                "price": "4,500",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "2,250",
                "brand": "Dialfa"
            },
            {
                "entity_id": "503",
                "sku": "368",
                "name": "DLF Baby Kitty Sham&Dush250ml0552(8)",
                "image_url": "/path/media/catalog/product/cache/h/k/hk_368.png",
                "url_key": "/path/dlf-baby-kitty-sham-dush250ml0552-8",
                "price": "6,000",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "3,000",
                "brand": "Dialfa"
            },
            {
                "entity_id": "506",
                "sku": "397",
                "name": "DLF Bagno Guanto Sponge WTP 0044 (5)",
                "image_url": "/path/media/catalog/product/cache/3/9/397.png",
                "url_key": "/path/dlf-bagno-guanto-sponge-wtp-0044-5",
                "price": "8,000",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "4,000",
                "brand": "Dialfa"
            }
        ],
        "Nevella": [
            {
                "entity_id": "277",
                "sku": "118",
                "name": "Nevella Probiotics 100 Tabs",
                "image_url": "/path/media/catalog/product/cache/n/e/nevella2.png",
                "url_key": "/path/nevella-probiotics-100-tabs",
                "price": "5,139",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "4,111",
                "brand": "Nevella"
            },
            {
                "entity_id": "280",
                "sku": "159",
                "name": "Nevella Probiotics 2,000 Sachets",
                "image_url": "/path/media/catalog/product/cache/u/n/untitled_1.png",
                "url_key": "/path/nevella-probiotics-2-000-sachets",
                "price": "103,637",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "103,637",
                "brand": "Nevella"
            }
        ],
        "Medi Baby": [
            {
                "entity_id": "549",
                "sku": "778",
                "name": "Wet Wipes Medi Baby 100 pcs",
                "image_url": "/path/media/catalog/product/cache/7/7/778.png",
                "url_key": "/path/wet-wipes-medi-baby-100-pcs",
                "price": "3,500",
                "symbol": "LBP ",
                "qty": 0,
                "rating": 0,
                "wishlist": false,
                "specialprice": "2,625",
                "brand": "Medi Baby"
            }
        ]
    }
}

Sounds like stackoverflow.com/questions/38554562/…

Günter Zöchbauer
– Günter Zöchbauer

2016-11-08 06:41:55 +00:00
Commented Nov 8, 2016 at 6:41 — Günter Zöchbauer
– Günter Zöchbauer, Commented Nov 8, 2016 at 6:41

Mahmoud Ismail · Accepted Answer · 2016-11-08 15:38:32Z

3

to print Admiranda array in *ngfor loop, first write one pipe

Pipe.ts

@Pipe({
  name: 'objectValues'
})
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>

edited Nov 8, 2016 at 15:38

Mahmoud Ismail

1,6175 gold badges28 silver badges52 bronze badges

answered Nov 8, 2016 at 6:46

Vinay Pandya

3,1703 gold badges29 silver badges44 bronze badges

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

6 Comments

Mahmoud Ismail Over a year ago

thank you for your response but any more details how i can use pipe in ionic 2 ?

Vinay Pandya Over a year ago

ionic 2 under the hood using angular 2, this pipe i think you can use as angular 2 pipe. just include your pipe in app.module.ts file and you can use that pipe anywhere in project pipe symbol. i dont have idea about ionic but i do have about angular 2.

Mahmoud Ismail Over a year ago

i've got an error Uncaught Error: Template parse errors when use this pipe in my template any suggestion ?

Mahmoud Ismail Over a year ago

Solved by removing the space between ul and *ngFor.

Mahmoud Ismail Over a year ago

But i's not working i've got this error

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

thanks in advanced.

|

adm1n · Accepted Answer · 2021-10-04 08:59:51Z

1

Angular by default has keyvalue pipe for looping json arrays.

Have a look at the below example:

<select>
    <option *ngFor="let item of json | keyvalue" value="{{ item.key }}">
        {{ item.value }}
    </option>
</select>

edited Oct 4, 2021 at 8:59

answered Jun 4, 2020 at 14:13

adm1n

293 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related