Nested JSON Data in Ionic

Question

thanks in advance, I am using Ionic 4 for a mobile app and on a page there is a need to list out the nested data but I don't seem to be able to get it right.

Following is the JSON Data

"campaign_performance": {
      "id": 11783,
      "name": "calvinseng.com",
      "mobile": "false",
      "date_from": "2018-01-01",
      "date_to": "2018-01-02",
      "keywords": [
        {
          "id": 235505,
          "name": "hot stamping printing",
          "positions": {
            "2018-01-01": 1,
            "2018-01-02": 1
          }
        },
        {
          "id": 235506,
          "name": "creative agency singapore",
          "positions": {
            "2018-01-01": 59,
            "2018-01-02": 57
          }
        }
       ]
    }

and on the page, the html that I did was

    <ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
      {{ campaign.name }}
        <ng-container *ngFor="let keyword of userService.campaign_performance.keywords">
            {{ keyword.id }}
        </ng-container>
    </ion-list>

But the html returned nothing in the View.

Was hoping to achieve something similar as attached. Any idea?

score 0 · Accepted Answer · answered Jul 15 '19 at 04:42

0

This looks like its more likely to be:

<ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
  {{ campaign.name }}
    <ng-container *ngFor="let keyword of campaign.keywords">
        {{ keyword.id }}
    </ng-container>
</ion-list>

You are looping each campaign_performance and assigning it to campaign.

So if you want to do an inner loop then you start from that variable and loop its individual contents.

answered Jul 15 '19 at 04:42

rtpHarry

13,019
4
43
64

Thanks! How can I retrieve the value for positions? With this code I could retrieve the keywords but not the positions ` {{ keyword.name }} {{ keyword.positions[0] }} ` – Calvin Seng Jul 15 '19 at 07:47
your `kwyword.position` are not Array. you can get simply without `[0]` index. e.g: ` {{ keyword.name }} {{ keyword.positions }} ` – Najam Us Saqib Jul 15 '19 at 09:36
That's a new question to be honest. I've answered your original question, but now you have added on a huge new aspect to this. It seems, the simple answer is there isn't any built in way to do it. The more [complex answer is here](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor). Perhaps if you need help with that you can open another question and close this as resolved. – rtpHarry Jul 15 '19 at 12:02

Nested JSON Data in Ionic

1 Answers1