Angular - display any json data on the view component view in a loop without knowing the structure

Question

I have some json data that I need to display on my app.component.html

Here is some sample data:

[
  {
    "name": "d1",
    "days": [
      "monday",
      "wednesday",
    ],
    "options": {
      "name": "o1",
      "extras": [],
      "temp": [
        "12",
        "25",
        "12"
      ]
    }
  },
  {
    "name": "d2",
    "days": [
      "tuesday",
      "wednesday",
    ],
    "options": {
      "name": "o2a",
      "extras": [
        {
          name: 'extra 1'
        }
      ],
      "temp": [
        "22",
        "25",
        "12"
      ]
    }
  }
]

At the moment I have it this way:

<ul *ngFor="let dat of data">
  <li>{{dat.name}}</li>
</ul>

..etc

But the key names and values are not fixed so they can change and be more or less.

My question is, how can I do this where it can read any json data?

Can you show what you expect the generated html to become with the sample data? In the case of `name`, it's easy: you just want it inside the `
@ShamPooSham, What I understood is, the user's JSON key names are not final but he/she wants to ensure the data gets displayed without breaking even if the key names gets changed in future. So, I was suggesting that it may not be possible. — Akhil, Jul 09 '20 at 18:04
so you're basically asking how do I keep displaying a chicken if tomorrow they call it a cow. I'm not sure its possible unless you're willing to show the whole farm using `
data | json
` — Stavm, Jul 09 '20 at 18:18
you can try `recursive template` there are many examples. https://stackoverflow.com/questions/35733186/angular2-ul-li-json-tree-recursive-in-ngfor or https://steemit.com/utopian-io/@jaysermendez/angular-tricks-recursively-rendering-a-tree-structure it depends how enhanced view you are need — Radik, Jul 09 '20 at 18:54

Akhil · Answer 1 · 2020-07-09T17:53:01.203

2

You are writing <li>{{dat.name}}</li> and expecting everything to work if the key name gets changed, then its not possible.

However, If you just want to display the whole JSON in your UI, you can use json pipe like ::

<li>{{dat | json}}</li>

If you want the JSON gets displayed in pretty printed format, please change to ::

<div *ngFor="let dat of data">
    <pre>{{dat | json}}</pre>
</div>

edited Jul 09 '20 at 17:53

answered Jul 09 '20 at 17:35

Akhil

1,403
7
19

I tried that but it just put the whole data between

Tomazbyden2000

Jul 09 '20 at 17:42

1

This I guess will not be possible... If you are worried about the formatting.. you can try out like ::

{{dat | json}}

– Akhil Jul 09 '20 at 17:50

Basically I want to have a treeview that displays the json data – Tomazbyden2000 Jul 09 '20 at 18:03

I understood but I am just trying to suggest is everything is possible but this may not be possible if you want your code to be working even if the key names gets changed. You'll need to either display the entire JSON or you'll need to finalize JSON and decorate the UI – Akhil Jul 09 '20 at 18:08

score 2 · Accepted Answer · answered Jul 09 '20 at 19:35

There's probably a nicer Angular or JS JSON Tree viewer, but this can get you started. You need to recursively iterate through your objects.

I'm using recursive template outlets here, you may be able to do components (and if you need to add other functionality its probably worth looking into that).

Here's a demo on stack blitz: https://stackblitz.com/edit/angular-ivy-qadvlr?file=src%2Fapp%2Fapp.component.ts

Example component, it just has your data as an array, and a helper method to try and determine the type of value we got passed in, since its type will determine how we need to display it.

export class AppComponent  {
  data1 = [
    {
      "name": "d1",
      "days": [
        "monday",
        "wednesday",
      ],
      "options": {
        "name": "o1",
        "extras": [],
        "temp": [
          "12",
          "25",
          "12"
        ]
      }
    },
    {
      "name": "d2",
      "days": [
        "tuesday",
        "wednesday",
      ],
      "options": {
        "name": "o2a",
        "extras": [
          {
            name: 'extra 1'
          }
        ],
        "temp": [
          "22",
          "25",
          "12"
        ]
      }
    }
  ]

  getType(val: any) {
    if (Array.isArray(val)) {// aray's will be type of "object" so need specail cases, and possibly others but this is a good start
      return 'array';
    } else if (typeof val === 'string' || val instanceof String) {
      return 'string';
    } else if (typeof val === 'boolean') {
      return 'boolean';
    } else if (typeof val === "object") {
      return 'object'
    }
  }

}

Kinda messy, recursive templates that don't care about property names. Instead we use Angular's keyvalue pipe to get the keys/values of an object.

<ul *ngFor="let someObj of data1;">
  <ng-container *ngTemplateOutlet="objectTemplate; context: {obj: someObj}"></ng-container>
</ul>


<ng-template #recursiveTemplate let-key="key" let-valueType="valueType" let-value="value">
  {{key}}

  <ng-container [ngSwitch]="valueType">

      <ng-container *ngSwitchCase="'array'">
        <ng-container *ngTemplateOutlet="arrayTemplate; context: { value: value}"></ng-container>
      </ng-container>

      <ng-container *ngSwitchCase="'object'">
        <ul>
        <ng-container *ngTemplateOutlet="objectTemplate; context: {obj: value}"></ng-container>
        </ul>
      </ng-container>

      <!-- anything we might have missed or don't needs anything special for, just show it as JSON -->
      <ng-container *ngSwitchDefault>
         {{key ? "- " : ""}}{{value | json}}
      </ng-container>

  </ng-container>
</ng-template>

<ng-template #arrayTemplate let-value="value">
  <ul>
    <li *ngFor="let child of value;">
        <ng-container *ngTemplateOutlet="recursiveTemplate; context:{ key:null, valueType: getType(child), value: child }"></ng-container>
    </li>
  </ul>
</ng-template>

<ng-template #objectTemplate let-obj="obj">
  <li *ngFor="let item of obj | keyvalue;">
  <ng-container *ngTemplateOutlet="recursiveTemplate; context:{ key:item.key, valueType: getType(item.value), value: item.value }"></ng-container>
  </li>
</ng-template>

score 1 · Answer 3 · answered Jul 09 '20 at 18:13

1

Just do this.

<pre>
{{ data | json }}
</pre>

answered Jul 09 '20 at 18:13

Ahmad Sharif

4,141
5
37
49

Angular - display any json data on the view component view in a loop without knowing the structure

3 Answers3