Not able to parse JSON in angular(IONIC)

Question

I am creating a IONIC Application, Using API I am able to get data to my component. Code to get result is:

getIndianCollegeSearchData() {
    this.showLoader();
    this.apiService.getCollegeData().retry(3)
      .subscribe(colleges => {
        console.log(colleges);
        this.loading.dismiss();
        this.searchResults = colleges;
        console.log(this.searchResults);
      }, (err) => {
        this.loading.dismiss();
      }
    );

I changed my HTML as,

<ion-list-header color="primary" *ngFor="let details of searchResults.result.engineering">
      <ng-container *ngFor="let detail of details.colleges">
        {{detail.title}}
      </ng-container>
     </ion-list-header>

my JSON Format is:

{ "result": { "engineering": [ { "name": "Tamil Nadu", "colleges": [ { "id": "1", "title": "wdwd" }, { "id": "2", "title": "titlealsadasbum2" } ] }, { "name": "Kerala", "colleges": [ { "id": "3", "title": "titleqqwalbum2" }, { "id": "4", "title": "titleaasalbum2" } ] } ], "medicine": [ { "name": "Tamil Nadu", "colleges": [ { "id": "1", "title": "med-wdwd" }, { "id": "2", "title": "med-titlealsadasbum2" } ] }, { "name": "Kerala", "colleges": [ { "id": "3", "title": "med-titleqqwalbum2" }, { "id": "4", "title": "med-titleaasalbum2" } ] } ] } }

I got the output in console as:

But when running my html file i got an error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'result' of undefined TypeError: Cannot read property 'result' of undefined at Object.eval [as updateDirectives] (IndianstudiesPage.html:24)

i referred to Observable type error: cannot read property of undefined and Cannot read property of 'xxx' of undefined. Both solutions gives me no errors but no value is displayed in html.

I added : <div *ngIf="searchResults">object data using NgIf: {{searchResults.result.engineering.name}}</div>

Nothing prints in div.

Mine is nested json and need to loop through the array as a list.

what am i doing here wrong?

and please search SO before posting, there are plenty of Q&A for this question ;) — AT82, Jan 02 '18 at 08:38
@AJT_82. I tried the above links and its not working. I tried `*ngIf` still it didnt display the data. I dont know why? its a nested JSON array — , Jan 02 '18 at 09:04
I'd advice for the safe navigation operator, since still you will get a `undefined` error since it will display before `result` has value, so try `searchResults?.result?.engineering`, maybe you need it on the nested array too, maybe not. Try :) — AT82, Jan 02 '18 at 09:17
@AJT_82. I tried this.. It still display nothing.. I need to get the `name` from the json field list. When i added `searchResults?.result?.engineering?.name` it gives blank — , Jan 02 '18 at 09:20
@AJT_82.. If its a simple json like `[ { "color": "red", "value": "asdsadasdsad" }]' it can be easily parsed using *ngFor. This happens in nested json . :( — , Jan 02 '18 at 09:24
`engineering` is an array, it has no `name` property. If you want to access the first item in array, you'd need to do `searchResults?.result?.engineering[0]?.name` but I guess you want to iterate the array. — AT82, Jan 02 '18 at 09:25
@AJT_82. Oh. so we have to iterate array? so there is no way we could use ng-repeat or *ngFor? — , Jan 02 '18 at 09:28
@AJT_82. Can you show me a sample code to do the same. I am very new to this.. — , Jan 02 '18 at 09:31
@AJT_82. Ohhhh.. Finally.. Thanks mate.. i was struggling with this.. as limited knowledge in this it was great difficulty in understanding.. :) — , Jan 02 '18 at 09:43

Not able to parse JSON in angular(IONIC)

0 Answers0