CODEWITHSUNDEEP
javascriptjsonangulartypescriptionic2
Sumi
Sumi

Reputation: 157

Ionic 2 - List the Array items from JSON response

I got the following output from JSON response(console.log(cluster in cal.ts).

Console Ouput of console.log(cluster in cal.ts)

Now i need to list only 5 element names which is in 3:Array(5)(please refer Picture). I tried the following code with the error 

  caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

cal.html

<ion-list>
<ion-item text-wrap *ngFor="let element of finalresult" >      
  <p >element.name</p>
</ion-item>

cal.ts

getdata(){

this.loading.present();

this.httpProvider.getJsonData().subscribe(

  result => {

    this.newsData=result;
    let cluster = {};
    result.forEach( r => {
    r.category_ids.forEach( id => {
    if(!cluster[id])
      cluster[id] = [];   
    cluster[id].push(r);
  });
});  
this.finalresult=cluster;
console.log(cluster);
  },
  err =>{
    console.error("Error : "+err);
  } ,
  () => {
    this.loading.dismiss();
  }
);
}

My JSON Result

 [{"product_id":"40","sku":"HOS001","name":"Turmeric Powder","set":"9","type":"configurable","category_ids":["2","3"],"website_ids":["1"]},{"product_id":"41","sku":"HOS001-20 grms","name":"Turmeric Powder-20 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"42","sku":"HOS001-100 grms","name":"Turmeric Powder-100 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"43","sku":"HOS001-50 grms","name":"Turmeric Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"44","sku":"HOS002","name":"Coriander Powder ","set":"9","type":"configurable","category_ids":["2","3"],"website_ids":["1"]},{"product_id":"47","sku":"HOS003","name":"Chilli Powder","set":"9","type":"configurable","category_ids":["2","3"],"website_ids":["1"]},{"product_id":"48","sku":"HOS003-50 grms","name":"Chilli Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"49","sku":"HOS003-100 grms","name":"Chilli Powder-100 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"50","sku":"HOS003-500 g","name":"Chilli Powder-500 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"51","sku":"HOS003-20 grms","name":"Chilli Powder-20 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"52","sku":"HOS004","name":"Cumin Powder","set":"9","type":"configurable","category_ids":["2","3"],"website_ids":["1"]},{"product_id":"53","sku":"HOS004-50 grms","name":"Cumin Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"54","sku":"HOS004-500 g","name":"Cumin Powder-500 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"55","sku":"HOS005","name":"Pepper Powder","set":"9","type":"configurable","category_ids":["2","3"],"website_ids":["1"]},{"product_id":"56","sku":"HOS005-50 grms","name":"Pepper Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"57","sku":"HOS005-10 grms","name":"Pepper Powder-10 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"58","sku":"HOS002-20 grms","name":"Coriander Powder -20 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"59","sku":"HOS002-50 grms","name":"Coriander Powder -50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"60","sku":"HOS002-100 grms","name":"Coriander Powder -100 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"61","sku":"HOS002-500 g","name":"Coriander Powder -500 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"62","sku":"HOS006","name":"Kulambu Chilli powder","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"63","sku":"HOS006-50 grms","name":"Kulambu Chilli powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"64","sku":"HOS007","name":"Sambar Powder","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"66","sku":"HOS007-50 grms","name":"Sambar Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"67","sku":"HOS008","name":"Rasam Powder","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"68","sku":"HOS008-50 grms","name":"Rasam Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"69","sku":"HOS009","name":"Idly chutney Powder","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"70","sku":"HOS009-50 grms","name":"Idly chutney Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"71","sku":"HOS010","name":"Garam Masala ","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"72","sku":"HOS010-50 grms","name":"Garam Masala -50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"73","sku":"HOS011","name":"Curry masala powder","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"74","sku":"HOS011-50 grms","name":"Curry masala powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"75","sku":"HOS011-100 grms","name":"Curry masala powder-100 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"76","sku":"HOS012","name":"Happyos Veg Briyani Masala","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"78","sku":"HOS013","name":"Chicken briyani masala","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"80","sku":"HOS014","name":"Mutton Briyani masala","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"82","sku":"HOS012-50 grms","name":"Veg Briyani Masala-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"83","sku":"HOS013-50 grms","name":"Chicken briyani masala-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"84","sku":"HOS014-50 grms","name":"Mutton Briyani masala-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"85","sku":"HOS015","name":"Chilli Chicken Masala","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"86","sku":"HOS015-50 grms","name":"Chilli Chicken Masala-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"87","sku":"HOS016 ","name":"Chicken Masala","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"88","sku":"HOS016 -50 grms","name":"Chicken Masala-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"89","sku":"HOS016 -20 grms","name":"Chicken Masala-20 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"90","sku":"HOS016 -100 grms","name":"Chicken Masala-100 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"91","sku":"HOS016 -250 g jar","name":"Chicken Masala-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"92","sku":"HOS017","name":"Mutton Masala","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"93","sku":"HOS017-50 grms","name":"Mutton Masala-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"94","sku":"HOS017-100 g jar","name":"Mutton Masala-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"95","sku":"HOS017-250 g jar","name":"Mutton Masala-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"96","sku":"HOS016 -100 g jar","name":"Chicken Masala-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"97","sku":"HOS018","name":"Fish fry Masala","set":"9","type":"configurable","category_ids":["2","5"],"website_ids":["1"]},{"product_id":"98","sku":"HOS018-50 grms","name":"Fish fry Masala-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"99","sku":"HOS019","name":"Asafoetida Powder","set":"9","type":"configurable","category_ids":["2","4"],"website_ids":["1"]},{"product_id":"100","sku":"HOS019-50 grms","name":"Asafoetida Powder-50 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"101","sku":"HOS020","name":"Mango Thokku Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"102","sku":"HOS020-200 g","name":"Mango Thokku Pickles-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"103","sku":"HOS021","name":"Coriander leaves Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"104","sku":"HOS021-200 g","name":"Coriander leaves Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"105","sku":"HOS022","name":"Ginger Pickle ","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"106","sku":"HOS022-200 g","name":"Ginger Pickle -200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"107","sku":"HOS023","name":"Sweet Mango Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"108","sku":"HOS023-200 g","name":"Sweet Mango Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"109","sku":"HOS024","name":"Pudina Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"110","sku":"HOS024-200 g","name":"Pudina Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"112","sku":"HOS026","name":"Tomato Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"113","sku":"HOS026-200 g","name":"Tomato Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"114","sku":"HOS027","name":"Lime Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"115","sku":"HOS027-200 g","name":"Lime Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"116","sku":"HOS028","name":"Garlic Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"117","sku":"HOS028-200 g","name":"Garlic Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"118","sku":"HOS029","name":"Mango Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"119","sku":"HOS029-200 g","name":"Mango Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"120","sku":"HOS030","name":"Bitterlime Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"121","sku":"HOS030-200 g","name":"Bitterlime Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"122","sku":"HOS031","name":"Vathakulambu Mix","set":"9","type":"configurable","category_ids":["2","8"],"website_ids":["1"]},{"product_id":"123","sku":"HOS031-200 g","name":"Vathakulambu Mix-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"124","sku":"HOS032","name":"Puliyodharai Mix","set":"9","type":"configurable","category_ids":["2","8"],"website_ids":["1"]},{"product_id":"125","sku":"HOS032-200 g","name":"Puliyodharai Mix-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"126","sku":"HOS033","name":"Mixed veg Pickle","set":"9","type":"configurable","category_ids":["2","6"],"website_ids":["1"]},{"product_id":"127","sku":"HOS033-200 g","name":"Mixed veg Pickle-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"128","sku":"HOS038","name":"Appalam","set":"9","type":"configurable","category_ids":["2","9"],"website_ids":["1"]},{"product_id":"129","sku":"HOS038-100 grms","name":"Appalam-100 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"130","sku":"HOS038-150 g","name":"Appalam-150 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"131","sku":"HOS038-200 g","name":"Appalam-200 g","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"132","sku":"HOS031-200 g-Packet","name":"Vathakulambu Mix-200 g-Packet","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"133","sku":"HOS031-100 grms-Packet","name":"Vathakulambu Mix-100 grms-Packet","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"134","sku":"HOS031-10 grms-Pet Jar","name":"Vathakulambu Mix-100 grms-Pet Jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"135","sku":"HOS001-100 g jar","name":"Turmeric Powder-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"136","sku":"HOS001-250 g jar","name":"Turmeric Powder-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"137","sku":"HOS001-500 g jar","name":"Turmeric Powder-500 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"138","sku":"HOS002-250 g jar","name":"Coriander Powder -250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"139","sku":"HOS002-100 g jar","name":"Coriander Powder -100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"140","sku":"HOS003-100 g jar","name":"Chilli Powder-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"141","sku":"HOS003-250 g jar","name":"Chilli Powder-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"142","sku":"HOS006-100 g jar","name":"Kulambu Chilli powder-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"143","sku":"HOS006-250 g jar","name":"Kulambu Chilli powder-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"144","sku":"HOS007-100 grms","name":"Sambar Powder-100 grms","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"145","sku":"HOS007-100 g jar","name":"Sambar Powder-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"146","sku":"HOS007-250 g jar","name":"Sambar Powder-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"147","sku":"HOS007-500 g jar","name":"Sambar Powder-500 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"148","sku":"HOS008-100 g jar","name":"Rasam Powder-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"149","sku":"HOS008-250 g jar","name":"Rasam Powder-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"150","sku":"HOS008-500 g jar","name":"Rasam Powder-500 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"151","sku":"HOS009-100 g jar","name":"Idly chutney Powder-100 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"152","sku":"HOS009-250 g jar","name":"Idly chutney Powder-250 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"153","sku":"HOS009-500 g jar","name":"Idly chutney Powder-500 g jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"154","sku":"HOS019-20 grms-Pet Jar","name":"Asafoetida Powder-20 grms-Pet Jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"155","sku":"HOS019-10 grms-Pet Jar","name":"Asafoetida Powder-10 grms-Pet Jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]},{"product_id":"156","sku":"HOS022-200 g-Pet Jar","name":"Ginger Pickle -200 g-Pet Jar","set":"9","type":"simple","category_ids":[],"website_ids":["1"]}]

Final Result should look similar to the following image. But instead of the items, It should display Turmeric Powder, Coriander Powder...

Output

Upvotes: 1

Views: 2918

Answers (3)

Saksham Gupta
Saksham Gupta

Reputation: 628

You're getting this error because your variable cluster is an Object and not an array.

Just change

let cluster = {};

to

let cluster = [];

And then change your ngFor accordingly like

<ion-item text-wrap *ngFor="let element of finalresult[3]" >      
  <p>element.name</p>
</ion-item>

EDIT:

I think the finalresult variable does not have the data yet. So try this

let finalresult = []; //where you have declared the variable

this.httpProvider.getJsonData().subscribe(

        result => {

            this.newsData=result;
            let cluster = [];
            let i = 0;
            result.forEach( r => {
                i++;
                let j = 0;
                r.category_ids.forEach( id => {
                    j++;
                    if(!cluster[id])
                        cluster[id] = [];
                    cluster[id].push(r);
                });
                if(i == result.length && j == r.category_ids.length) this.finalresult=cluster;
            });
            console.log(cluster);
        },
        err =>{
            console.error("Error : "+err);
        } ,
        () => {
            this.loading.dismiss();
        }
    );

Upvotes: 1

hemantv
hemantv

Reputation: 489

By using *ngFor="let element of finalresult", you're asking it to loop through the complete json finalresult which is an Object. As you said you only need to fetch particular array element from the result, you can try passing the key or index of that element.

So your *ngFor will now be, *ngFor="let element of finalresult[3]"

You can check out the concept of pipes if you want to further manipulate data.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222542

Your collection should be an array, right now you have an object consists of two arrays. you need to have a nested *ngFor and you need to have {{}}

<ion-item text-wrap *ngFor="let element of finalresult" >      
  <p *ngFor="let mydetail of element " >{{mydetail.name}}</p>
</ion-item>

Upvotes: 0

Related Questions