JSON in angular frontend

Question

hi someone can help me to show my json in a frontend angular (like tree or extension)

this is my backend JSON it's a Buildings array grouped by campuses to make relational mongodb dataBases.

    [
{
"_id": "campus4",
"buildings": [
{
"buildingName": "building7",
"phoneNumber": "00000000000"
},
{
"buildingName": "building8",
"phoneNumber": "000000000"
},
{
"buildingName": "building9",
"phoneNumber": "0000000000"
}
]

my get service :

  getBuildings() {
    return this.http.get(`${this.url}/buildings`);
  }

my buildinglist.component.ts :

    ngOnInit() {
  this.fetchBuildings();
}

fetchBuildings() {
  this.gesroomService
    .getBuildings()
    .subscribe((data: Building[]) => {
      this.buildings = data;
      console.log('Building data requested...');
      console.log(this.buildings);
    });
}

Answer 1

You can iterate over the first array, accessing _id. Then you can iterate over buildings list.

Something like this should work

<div *ngFor="let bList of buildings">

    <div>_id: {{ bList._id }}</div>
    <div *ngFor="let b of bList.buildings">
         <div>buildingName: {{ b.buildingName }}</div>
         <div>phoneNumber: {{ b.phoneNumber }}</div>
    </div>

</div>