How to GET nested [object Object] data from http client in Angular app?

Question

I have problem with write specific nested data in component. I loaded keys data (brands) from api but value nested data (models) not work and only write [object Object]. This data I GET from server to console:

and this show me at the monitor: .

In the console I have this ERROR: ERROR TypeError: Cannot read property 'map' of undefined.

I expecting for example this:

AUDI - AUDI (brands)
A1 (models)
A2
A3
A4...

BMW
M1
M3
M5...

Do you know how resolve this? Thank you for your help.

My code:

app.component.ts

vehicleLists: VehicleLists[] = [];

  constructor(
    private vehicleService: VehicleService,
    private router: Router,
    private vehicleListAdapter: ListAdapter,
  ) {

  }

  ngOnInit(): void {
    this.getLists();
  }

  public getLists() {
    this.vehicleService.getVehicleLists().subscribe(({ brands, models }) => {
      console.log(brands);
      this.vehicleLists = brands;
      models.map(model =>
        this.vehicleLists.push(this.vehicleListAdapter.adapt(model)));
    });
  }

app.component.html

<div *ngFor="let item of vehicleLists">
  <p>{{item.id}} - {{item.name}}</p>
    <p>{{item.models}}</p>
</div>

lists.ts - model

export class VehicleLists {
  id: string;
  name: string;
  models: VehicleModel[];
}

export class VehicleModel {
  name: string;
  description: string;
}

vehicle-list.adapter.ts

export class ListAdapter implements Adapter<VehicleLists> {
  adapt(item: any): VehicleLists {
    const obj = new VehicleLists();
    obj.name = item.name;
    obj.id = item.id;
    obj.models = item.models;
    return obj;
  }
}

vehicle.service.ts

getVehicleLists() {
    return this.http.get<any>(environment.ApiUrl + `/api/url`);
  }

for console try console.log(JSON.stringify(brands)); will give you a clear data output and paste that here, — Affan
– Affan, Commented Mar 4, 2021 at 10:20
probably you are trying to loop over a single array, seems like you have a nested array obj meaning you have to apply nested ngFor* — Affan
– Affan, Commented Mar 4, 2021 at 10:24

hadimbj · Accepted Answer · 2021-03-04 11:17:03Z

2

what you see is the normal behavior and totally expected. you can't use an object in html and expect it's content gets rendered. since item.models is an array and also it's not clear what is exactly the structure of a single model, however you have 2 options:

use json pipe in your template:

<div *ngFor="let item of vehicleLists">
  <p>{{item.id}} - {{item.name}}</p>
  <p>{{item.models | json}}</p>
</div>

use another ngFor on models and for each model specify the field you want to display:

<div *ngFor="let item of vehicleLists">
  <p>{{item.id}} - {{item.name}}</p>
  <p *ngFor="let model of item.models>{{model.name}}</p>
</div>

answered Mar 4, 2021 at 11:17

hadimbj

1,7272 gold badges10 silver badges12 bronze badges

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

Comments

Murat Colyaran · Accepted Answer · 2021-03-04 10:46:04Z

1

Even though I don't know the reason, similar things happened to me a lot. It'll be a little stupid, but you can try something like this.

let myObj = {
  "id": "audi",
  "name": "audi",
  "models": ["a1", "a2", "a3"]
};
let models = [];
let values = Object.values(myObj);
for(var value of values){
  if(Array.isArray(value)) {
    let newObj = new Object();
    newObj["id"] = values[values.indexOf(value) - 2];
    newObj["name"] = values[values.indexOf(value) - 1];
    newObj["models"] = value;
    models.push(newObj);
  }
}

Loop over each object in the array. models array should no longer show up as an [object object]

answered Mar 4, 2021 at 10:46

Murat Colyaran

2,2072 gold badges13 silver badges34 bronze badges

1 Comment

BeauNut Over a year ago

understand your solution but models has 2 others nested values name: string and description: string

Collectives™ on Stack Overflow

How to GET nested [object Object] data from http client in Angular app?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related