Unable to access Angular API response while looping through

Question

I have been struggling in accessing my API response, which looks like this:

{
  "products": [
  {
    "creationDate": "2018-09-18T23:44:38.062Z",
    "_id": "5ba18dea6d29622f1c539674",
    "name": "Sample 1",
    "description": "some description goes here for sample product",
    "count": 3,
    "__v": 0
  },
  {
    "creationDate": "2018-09-18T23:44:38.062Z",
    "_id": "5ba18e756d29622f1c539675",
    "name": "Sample 3",
    "description": "some description goes here for sample product",
    "count": 3,
    "__v": 0
  }
  ]
}

This is retrieved by the following method call in my Service:

getAll(){
  return this.http.get('https://jsonplaceholder.typicode.com/posts')
        .map(response => response);
}

Here is where I call it in my component:

ngOnInit() {
  this.newService.getAll().subscribe(data => 
    {
      this.Repdata = data.json();
      this.Repdata = Array.of(this.Repdata);
      console.log(data)
    }
)}

And here is where it is displayed in my Component html:

<p *ngFor="let key of Repdata">
  <span>   
    sample |{{key.name}}
  </span>
</p>

Nothing is being displayed in my HTML output. What am I doing wrong?

Repdata is not any array. Try doing *ngFor="let key of Repdata.products". — Roddy of the Frozen Peas
– Roddy of the Frozen Peas, Commented Sep 23, 2018 at 1:14

GreyBeardedGeek · Accepted Answer · 2018-09-23 02:14:23Z

1

First of all, I'm assuming that you're using a relatively recent version of Angular, say 5 or 6.

Your 'http' class should be an HttpClient, which means that you are importing HttpClientModule.

Then, get rid of the .map() call after the http.get(), since it does nothing anyway (map response => response is not changing anything).

Your service method should look like:

getAll() {
 return this.http.get('https://jsonplaceholder.typicode.com/posts');
}

Next, if you haven't already, define an object that matches one item in the json array, e.g.

export class Product {
      creationDate: Date;
      _id: string;
      name: string;
      description: string;
      count: number;
      __v: number;
}

Then, you can go back and modify your service call to look like this:

getAll(): Observable<Product[]> {
 return this.http.get<Product[]>('https://jsonplaceholder.typicode.com/posts');
}

This will cause the httpClient to cast the result to an array of Product, and return an Observable of an array of Product.

Then, your component code becomes:

products: Product[];

ngOnInit() {
  this.newService.getAll().subscribe(products => 
    {
      this.products = prodcuts;
      console.log(`got products: ${JSON.stringify(this.products)}`);
    }
)}

And your template would be:

<p *ngFor="let product of products">
  <span>   
    sample | {{product.name}}
  </span>
</p>

One last thing - the jsonplaceholder url in your example does not return the data structure that's in your code. If that was a typo, or just a substitute for your actual url, because you didn't want to show your actual one, great. But it you want to use that exact url, you're going to have change the Product object to a Post object that matches the data that is actually returned.

Here's a StackBlitz example: https://stackblitz.com/edit/angular-fo3bin

edited Sep 23, 2018 at 2:14

answered Sep 23, 2018 at 1:21

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

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

1 Comment

Nazehs Over a year ago

Thanks buddy. issue solved but I did a single modification on the code which was on the class declaration. I declared the products:any without declaring the class and it was fine and the reason was because I was getting an error assigning the variable to the class i.e products:Products[]

Collectives™ on Stack Overflow

Unable to access Angular API response while looping through

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related