在Angular中访问HTTP嵌套的JSON数据

Question

Here's the component in question:

@Component({
  selector: 'my-app',
  template: `
  {{tests | json}}

    <div *ngFor='let test of tests'>
        <div *ngFor='let x of test.A.B'>
          <div *ngFor='let y of x.C.D'>
            writerid:{{y.writerid}} <br>
            content:{{y.content}} <br>
            writedt:{{y.writedt }} <br>
          </div>
       </div>
    </div>
  `,
})

public tests: any[];

The constructor gets the JSON data from an API here:

constructor(private _http: Http) {
    _http.get(this.API_URI).subscribe(result => {
      this.tests = result.json();
    });
  }

This is my JSON data from http(API_URI) , printed by {{tests | json}} {{tests | json}} (in @component, template):

 {
   'A': {
     'B': [{
       'C': {
         'D': [{
           'content': 'content_test1',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test1'
          }, {
           'content': 'content_test2',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test1'
          }, {
            'content': 'content_test3',
            'writedt': '2017-02-08 00:00:00',
            'writerid': 'writerid_test2'
          },  {
           'content': 'content_test4',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test2'
         }]
       }
     }]
   }
 }

The error I get is this:

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

How can I fix it?

Answer 1

Look into your json, it has object but ngFor works for array types

<div *ngFor='let x of tests.A.B'>
          <div *ngFor='let y of x.C.D'>
            writerid:{{y.writerid}} <br>
            content:{{y.content}} <br>
            writedt:{{y.writedt }} <br>
          </div>
       </div>
    </div>

That is the reason you get this error.

Mistakes

1. <div *ngFor='let test of tests'> - tests is of type object and not a collection of objects or array.

LIVE DEMO