Display json data with angular 7

Question

I want to display json data on screen with Angular 7. I have an error.

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

In my service;

getData(): Observable <any> {
        return this.http.get(this.myUrl);
    }

In my component;

public data: []= null;

    ngOnInit() {
          this.myService.getData().subscribe((d) => this.data = d);
      }

In my html;

<tbody>
  <tr *ngFor = "let people of data">
    <td> {{ people.name}}</td>
  </tr>
</tbody>

My json;

{
    "people": [
        {
            "number": [
                0,
                0
            ],
            "name": "arya"
        },
        {
            "number": [
                1,
                1
            ],
            "name": "arya2"
        }
    ]
}

How can I display these data, which in json, on screen with html?

You data is an object, not an array.

Roberto Zvjerković
– Roberto Zvjerković

2020-01-22 15:00:46 +00:00
Commented Jan 22, 2020 at 15:00 — Roberto Zvjerković
– Roberto Zvjerković, Commented Jan 22, 2020 at 15:00
Yes, how can I read this data?

Arya
– Arya

2020-01-22 18:26:45 +00:00
Commented Jan 22, 2020 at 18:26 — Arya
– Arya, Commented Jan 22, 2020 at 18:26

michaelitoh · Accepted Answer · 2020-01-22 18:40:44Z

0

Initialize your variable data with an empty array.

public data: [] = [];

and assign d.person to data variable.

this.myService.getData().subscribe((d) => this.data = d.people);

edited Jan 22, 2020 at 18:40

answered Jan 22, 2020 at 14:58

michaelitoh

2,34016 silver badges26 bronze badges

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

4 Comments

Arya Over a year ago

Ok. Now I have a different error. Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Arya Over a year ago

Thank you so much for your helps. Your answer was very helpful.

Arya Over a year ago

I have one more question @michaelitoh. Assume that, json data is constantly changing. And I want display these data on screen updately. For example, arya: 0 arya2: 1 How can I display?

michaelitoh Over a year ago

Please create another question.

Nik Dow · Accepted Answer · 2025-05-25 09:35:04Z

Here's a component which will display any data, including scalar, nested objects and arrays etc.

expand-json.component.html

<div class="json-container">
  <ul class="json-list">
    <ng-container *ngIf="isScalar(jsonData); else complex"> <!-- only invoked if the component is passed a scalar, never happens on recursion -->
      {{jsonData}}
    </ng-container>
    <ng-template #complex>
      <ng-container *ngIf="isArray(jsonData); else notArray">
        <li *ngFor="let item of jsonData;let i=index;">
          <span *ngIf="!isNull(item) && jsonData.length > 0 && !isScalar(item)" class="toggle" (click)="toggleExpand('index' + i)">
            <i class="fa" [ngClass]="{'fa-caret-right': !expanded['index'+i], 'fa-caret-down': expanded['index'+i]}" ></i>
          </span>
          {{ i }}: {{isScalar(item) ? item : ""}}
          <ul class="nested-json-list" *ngIf="expanded['index' + i]">
            <app-expandable-json [jsonData]="item"></app-expandable-json>
          </ul>
        </li>
      </ng-container>
      <ng-template #notArray>
        <li *ngFor="let item of objectKeys(jsonData)">
            <span *ngIf="!isNull(jsonData[item]) && ( !isArray(jsonData[item]) || jsonData[item].length > 0)  && !isScalar(jsonData[item]);" class="toggle" (click)="toggleExpand(item)">
              <i class="fa" [ngClass]="{'fa-caret-right':!expanded[item], 'fa-caret-down':expanded[item]}"></i>
            </span>
          {{ item }}: {{isScalar(jsonData[item]) ? jsonData[item] : ""}}
          <ul class="nested-json-list" *ngIf="expanded[item]">
            <app-expandable-json [jsonData]="jsonData[item]"></app-expandable-json>
          </ul>
        </li>
      </ng-template>
    </ng-template>
  </ul>
</div>

expand-json.component.css

.json-container {
  font-family: monospace;
  font-size: 14px;
}

.json-list {
  list-style-type: none;
  padding-left: 1em;
}

.nested-json-list {
  list-style-type: none;
  padding-left: 1em;
}

.toggle {
  cursor: pointer;
  margin-right: 5px;
}

expand-json.component.ts

import { Component, Input } from '@angular/core';
import {NgClass, NgForOf, NgIf} from "@angular/common";

@Component({
    selector: 'app-expandable-json',
    styleUrls: ['./expand-json.component.scss'],
    templateUrl: 'expand-json.component.html',
    standalone: true,
    imports: [
        NgForOf,
        NgClass,
        NgIf
    ],
})
export class ExpandableJsonComponent {
    @Input() jsonData: any;
    expanded: { [key: string]: boolean } = {};

    objectKeys(obj: any): string[] {
        return Object.keys(obj);
    }

    isObject(val: any): boolean {
        return val != null && typeof val === 'object' && Array.isArray(val) === false;
    }
    isArray( val: any): boolean {
        return val != null && Array.isArray(val) === true;
    }
    isScalar( val: any): boolean {
        return val === null || ( Array.isArray(val) === false && ! this.isObject(val));
    }
    isNull(val: any): boolean {
        return val === null;
    }

    toggleExpand(key: string): void {
        this.expanded[key] = !this.expanded[key];
    }

}

Include the component in the module:

import {ExpandableJsonComponent} from ".../expand-json.component";
@NgModule({
    imports: [
        ExpandableJsonComponent
    ],

Use it like this:

<app-expandable-json [jsonData]="data"></app-expandable-json>

Collectives™ on Stack Overflow

Display json data with angular 7

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related