how can i access nested json data in angular2

Question

this is my app.component.ts

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
  {{test | json}}

  <div ngFor='let test of tests' style='border: solid 1px'>
    <div>
      <P>
        writer: {{test.A.B.C.D.writerid}} <br>
        content:{{test}}<br>
        write_date:{{test}}</P>
    </div>
  </div>
  `,
})

public test: any[] = [
 {
   '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'
         }]
       }
     }]
   }
 }
];

test.A.B.C.D.writerid is not working error:Cannot read property 'B' of undefined i don't understand why error is not A but B how can i access D's content or writedt or writerid

AVJT82 · Accepted Answer · 2017-04-04 11:15:20Z

3

First of all, I assume you have some typos in your template (e.g ngFor), and that the array is actually called tests but let's disregard that.

I guess you want to iterate through the array of D. Without making any changes to your structure of your data, you can do it with nested *ngFor:s.

So first your array should be named tests, not test. And how to access the most inner array, we'll first iterate the tests array, after that iterate through array B and lastly the innermost array D. So your template would look like this:

  <div *ngFor="let test of tests">
    <div *ngFor="let x of test.A.B">
      <div *ngFor="let y of x.C.D; let i = index"> <h4>Content {{i+1}}</h4>
        {{y.content}}
        {{y.writedt | date}}
        {{y.writerid}}
      </div>
    </div>
  </div>

DEMO

answered Apr 4, 2017 at 11:15

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

8 Comments

김진창 Over a year ago

thanks! it works! when i get json data from constructor like constructor(private _http: Http) { _http.get(this.API_URI).subscribe(result => { this.tests = result.json(); }); }

김진창 Over a year ago

it got error : Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. how can i use http data like A.B.C.D.content

AVJT82 Over a year ago

Well how does your JSON look like? Seems JSON is constructed differently (or there is some async problem). Could you paste the JSON response to your question?

김진창 Over a year ago

{ "hits": { "hits": [{ "_source": { "json_comments": [{ "content": "\u314b\u314b\u314b\u314b - DCW", "writedt": "2016-02-08 17:05:48", "writerid": "morefico3042" }, { "content": "\uc800\ubc88\uc5d0 \ub3d9\uc7a5A\uc758 \ubcbd\uc744 \uc2e4\uac10\ud558\uc2dc\uace0\ub3c4 \ub3c4\uc804\ud558\uc2dc\ub294? \u3161\u3161", "writedt": "2016-02-08 17:07:38", "writerid": "\uce74\ub77c\ube71" }] } }] } }

김진창 Over a year ago

this is my json from API and {{test | json}}

|

Yuvraj Patil · Accepted Answer · 2017-04-04 13:30:14Z

0

You should access it as below:

test[0].A.B[0].C.D[0].writerid

edited Apr 4, 2017 at 13:30

answered Apr 4, 2017 at 10:27

Yuvraj Patil

8,8505 gold badges62 silver badges62 bronze badges

1 Comment

Vinit Sarvade Over a year ago

Shouldn't it be test[0].A.B[0].C.D[0].writerid

Collectives™ on Stack Overflow

how can i access nested json data in angular2

2 Answers 2

DEMO

8 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Related