如何在角度模板中显示JSON Web响应？

Question

I am trying to display some JSON data that comes as HTTP web response, but it's not working.

Below is my http request:

nodes: any;

ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('/assets/TEST.json').subscribe(data => {
        // Read the result field from the JSON response.
        this.nodes=data;
    });
}

And this is the template:

<div *ngFor="let node of nodes">
    <p>{{node.description}}</p>
</div>

This is my json data:

{
    "id": 1,
    "name": "root1",
    "link": "/login"
}

This the error I get in console:

Cannot find a differ supporting object '[object Object]' of type 'root1' where root1 is a component different from the one where the request is made.

Answer 1

First of all, your JSON is an object, not an array. Therefore, you can't use ngFor . As your object doesn't have a description property (but a name ), you may display the name (make sure that nodes has been set) using this template:

<p *ngIf="nodes">{{ nodes.name }}</p>

Answer 2

After our investigations in comments the solution :

• *ngFor shouldn't be used there since his JSON is an object not an array

so the solution is simply :

<p> id : {{nodes.id}}</p>
<p> name : {{nodes.name}}</p>
<p> link : {{nodes.link}}</p>