getting an array of objects within an object - Error trying to diff '[object Object]'

Question

I am getting an error in my console when i am trying to get data of an object within an object and not sure what is the correct mapping to return the array of of data that i need which is results in this case.

here is how my json file looks:

{
"count": 101,
"results": //this is an array[
  object 1, 
  object 2,....
}

My service call:

 getData(){
        return this._http.get('url')
        .map((res:Response) => res.json())
        .catch(this.handleError);
    }

My component file:

getData(){
    this.service.getData().subscribe(
      data => this.results = data,
      error => this.errorMessage = <any>error
    );
  }

html:

<tr *ngFor="let item of results">
   <td><a style="cursor: pointer">{{item.title}}</a></td>
</tr>

Sajeetharan · Accepted Answer · 2017-05-11 19:02:50Z

2

You should access the results array inside the results object, so the ngFor will look like,

<tr *ngFor="let item of results.results">
   <td><a style="cursor: pointer">{{item.title}}</a></td>
</tr>

answered May 11, 2017 at 19:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

7 Comments

bluePearl Over a year ago

i have tried that but i get this console error: ` Error trying to diff '[object Object]'`

Sajeetharan Over a year ago

did you try the above?

bluePearl Over a year ago

i wasn't sure if i have to change something in my mapping once i get the data to directly get the results object

bluePearl Over a year ago

results contains a list of objects.

Sajeetharan Over a year ago

change your getData as getData(): Observable<any> {

|

Supamiu · Accepted Answer · 2017-05-11 19:10:43Z

0

You should use async pipe to link observables to template:

<tr *ngFor="let item of (service.getData() | async).results">
   <td><a style="cursor: pointer">{{item.title}}</a></td>
</tr>

I think that your error comes from the fact that results is undefined if the request has not finished yet or if it failed. Using async pipe will remove this issue.

If you still want to handle errors in your component, you can to it like that:

Component:

public getServiceData:Observable<any>{
  return this.service.getData().catch(err => this.errorMessage = <any>err);
}

Html:

<tr *ngFor="let item of (getServiceData() | async).results">
   <td><a style="cursor: pointer">{{item.title}}</a></td>
</tr>

answered May 11, 2017 at 19:10

Supamiu

8,7417 gold badges47 silver badges79 bronze badges

Collectives™ on Stack Overflow

getting an array of objects within an object - Error trying to diff '[object Object]'

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related