Angular push array items to new array

Question

I have returned data from server like:

{
  user:{id: 1, ......},
  wishes:[
    {id: 3, ......},
    {id: 4, ......}
  ]
}

What I try to do is to push all items from wishes to an array named products but it returns undefined in view.

Code

controller

products: any[] = [];
limit = 10;
loading: any;

async getProducts() {
    this.loading = await this.loadingController.create({
      message: 'Please wait...',
      spinner: 'crescent',
      duration: 2000
    });

    await this.loading.present();

    this.wishlistService.getProducts().subscribe((res) => {
      for (let product of res['wishes']) {
        this.products.push(product);
      }
      this.hideLoading();
    });
  }

  private hideLoading() {
    this.loading.dismiss();
  }

HTML

<ion-row padding *ngIf="products.length>0 else noItem">
  <ion-col size="6" class="prodCard" size-sm *ngFor="let product of products | slice:0:limit">
  //rest of html part
  </ion-col>
</-ion-row>

PS

with console.log(res['wishes']); I can get my wishes part but somehow in my loop code (above) it doesn't work Maybe I placed it wrong

Any idea?

print typeof res['wishes'] and check whether its an array or what ?/ and have u tried by removing | slice:0:limit ?/ — Kishan Oza
– Kishan Oza, Commented Sep 3, 2019 at 5:06
1 typeof res['wishes'] I place this in console.log()? 2 no that's for pagination it has nothing to do with returned data, if data exist it simply paginate them that's all. — mafortis
– mafortis, Commented Sep 3, 2019 at 5:10
First, check the key name is same as come from the response, Check it's in array form and also check array length. — Neel Rathod
– Neel Rathod, Commented Sep 3, 2019 at 5:12
can u create a repo and share I can help if I can check on my Pc :) — Kishan Oza
– Kishan Oza, Commented Sep 3, 2019 at 5:12

Mustahsan · Accepted Answer · 2019-09-03 05:29:25Z

1

As per your data the product is nested inside wish object so you can access it like this:

for (let wish of res['wishes']) {
    this.products.push(wish.product);
}

answered Sep 3, 2019 at 5:29

Mustahsan

3,8421 gold badge22 silver badges35 bronze badges

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

Comments

NIDHIN VINCENT · Accepted Answer · 2019-09-03 05:45:27Z

0

you can directly use data.wishes in ngFor.

StackBlitz URL

 data = {"user":{"id":1,"name":"user name"},"wishes":[{"id":11,"name":"some wish"},{"id":52,"name":"wish item"}]};

 <li *ngFor="let product of data.wishes">{{product.name}}</li>

answered Sep 3, 2019 at 5:45

NIDHIN VINCENT

2551 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular push array items to new array

Code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related