CODEWITHSUNDEEP
angular
Nazehs
Nazehs

Reputation: 558

Unable to access Angular API response while looping through

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?

Upvotes: 0

Views: 44

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

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

Upvotes: 1

Related Questions