How do you access the object in the json array using angular?

Question

I am not able to access the syllabus array and console it in the js console. Also how do you print in the HTML component of the angular file? I tried many ways, but I was not successful. Maybe I feel I am missing something really easy. Could you guys help me solve this? Also could you explain how do you access JSON formats using angular or typescript easily? Maybe explanations clearly would make it easier for me to work with this JSON.

[{

  "State": "Tamil Nadu",
  "syllabus": [
    {
      "board": "CBSE",
      "details": [
        {
          "subject": "Tamil",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "English",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Maths",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Physics",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Chemistry",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Biology",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        }
      ]
    },
    {
      "board": "State board",
      "details": []
    }
  ]

},
{
    "State":"Kerala"
}]

html component and TS :

<div *ngFor="let item of data"> <p>{{item.syllabus}}</p> </div>  

ngOnInit() {
this.dataService.sendGetRequest().subscribe(( data: any[]) => { console.log(data); this.data = data; console.log(); });
}

NOTE : There are no errors, Just that it displays nothing

Could you post the code you have tried and mention the issues you faced (like errors)? — Manish, Jun 17 '20 at 06:54
html component :

{{item.syllabus}}

TS : this.dataService.sendGetRequest().subscribe(( data: any[]) => { console.log(data); this.data = data; console.log(); }); NOTE : There are no errors, Just that it displays nothing — srinivas muralidharan, Jun 17 '20 at 07:06
I mean like you posted the json in the question post TS and HTML as well. That might help people to understand your issue better. See https://stackoverflow.com/help/how-to-ask — Manish, Jun 17 '20 at 08:02

score 0 · Accepted Answer · answered Jun 17 '20 at 08:36

You need to use nested *ngFor loops with atleast one instance of keyvalue pipe. Try the following

Controller

export class AppComponent  {
  data = SUBJECTS;

  originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
    return 0;
  }
}

Template

<ng-container *ngFor="let state of data">
  <h1>{{ state.State }}</h1>
  <ng-container *ngFor="let syllabus of state.syllabus">
    <h3>{{ syllabus.board }}</h3><hr>
    <ng-container *ngFor="let detail of syllabus.details">
      <ng-container *ngFor="let grade of detail | keyvalue: originalOrder; let first=first">
        <h3 *ngIf="first; else gradesBlock">{{ grade.key }}: {{ grade.value }}</h3>
        <ng-template #gradesBlock>{{ grade.key }}: {{ grade.value }}</ng-template>
        <br/>
      </ng-container>
    </ng-container>
  </ng-container>
</ng-container>

keyvalue pipe sort order sourced from: https://stackoverflow.com/a/52794221/6513921

How do you access the object in the json array using angular?

1 Answers1