Using *ngFor with JSON Angular2

Question

I have a returned json object:

{
  "data": [
    {
      "type": "product",
      "id": "e0267f46-9721-48fc-8ee0-b554d82cfb52",
      "name": "fwefwefwef", 
...and so on...

I process it with this as part of my service:

export class MService {
...
     products.data.forEach(element => {
     let product = {
             name : element.name, 
             sku : element.sku, 
             description : element.description,
              category : element.relationships.categories.data[0].id,
             price: element.price[0].amount

            console.log(product);
          })
      });
  let product = MService
    });
  }
}

Which returns each object individually:

{
  "name": "Bombay Sapphire",
  "sku": "bomsaph",
  "description": "A great gin",
  "category": "46569361-13477074f952",
  "price": 1999
}

I have a model:

export class Prod{

    constructor(public name:string, public sku:string, public description:string, public category: string, public price:number){}

}

And a Component for which the *ngFor loop in the HTML returns needs to display what the API returns.

constructor (private mService: MService){ 

    products:Prod[] = [MService]
  }

HTML:

  <div *ngFor="let product of products"> 
      <div>{{product.name}} </div>
      <div>{{product.description}}</div>
      <div>{{product.sku}}</div>
    </div>

I am getting 'unused label' and 'expression expected' errors in the component.

What is your actual result? How is it different from what you were expecting? Two possible guesses from the limited info here would be 1) your 'product' object isn't a direct descendant of 'products' and you need to try something like 'let product of products.data' in your ngFor 2.) your ngFor is being run on an object rather than an array...that can lead to some unexpected behavior. — ryantdecker
– ryantdecker, Commented May 21, 2017 at 19:26
At the moment I'm getting an 'unused label' error message on the 'product' ( which makes me suspect I am not going from json -> HTML correctly). 1) this shouldn't be neccessary as it is run through the loop and returns the pairs listed above. 2) What would be the best way to convert it to an array? @ryantdecker — DominicLane
– DominicLane, Commented May 21, 2017 at 19:33
In your component products is being set to an array, which contains a reference to the MService class. That doesn't seem right. You need to use the instance of the MService instead: products = mService.whatever. Note that I added "whatever" b/c you don't really show the API for MService, so it's not clear where to get the array of Prod objects from. — Sunil D.
– Sunil D., Commented May 21, 2017 at 19:39
if you put {{products | json}} in the template instead of your ngFor*, what do you get? — ryantdecker
– ryantdecker, Commented May 21, 2017 at 19:42
@ryantdecker Same error. It is definitely " products:Prod[] = [MService] " that is causing the problem. — DominicLane
– DominicLane, Commented May 21, 2017 at 19:51

Community · Accepted Answer · 2017-05-23 12:34:51Z

1

Seems you want to extract some values from your JSON in objects and push each object to an array which you can iterate through. First of all, use interface instead of class, so your Prod would look like this:

export interface Prod{
  name:string;
  sku: string;
  description:string;
  category: string;
  price: number;
}

And instead of using forEach in your service, let's just use map to extract the properties you want, assign them to objects with Object.assign(), int the exact manner as you were using with forEach:

getData(){
  return this.http.get('src/data.json')
    .map(res => res.json().data.map((x:any) => 
       Object.assign({name:x.name,sku:x.sku,description:x.description,category:x.relationships.categories.data[0].id, price:x.price[0].amount})))
}

So now when we are receiving the data in the component, it's an array of type Prod, which you can use well in your template:

products: Prod[];

ngOnInit() {
  this.service.getData()
    .subscribe(data => {
      this.products = data;
    })
}

and template:

<div *ngFor="let product of products"> 
  <div>{{product.name}} </div>
  <div>{{product.description}}</div>
  <div>{{product.sku}}</div>
</div>

Here's a DEMO from where I got the complete JSON from your previous question: here

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered May 22, 2017 at 9:15

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

6 Comments

DominicLane Over a year ago

Thanks for sifting through and sorting my ineptitude!

AVJT82 Over a year ago

No problem! Glad I could help! :)

DominicLane Over a year ago

AHT_82 . hey! Justa quick follow up, I had things working, as per your Plunkr, but had to rejig things a little:[link] (imgur.com/a/cZgw6). Going wrong as always - do you mind taking a look?

AVJT82 Over a year ago

Hey! Remove ; from this.moltinService.getData; and you should be good to go :)

DominicLane Over a year ago

Hey! @AHT_82 . thanks fo your reply. I get this error? Is this because I'm sending the request for data before the response from the authentication is returned? link

|

Collectives™ on Stack Overflow

Using *ngFor with JSON Angular2

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related