Ionic 2 : Loop through List of Arrays in Object

Question

I have a browser console output from JSON which contains list of arrays in an Object. I need to print the name field of objects(Turmeric Powder, Coriander Powder) in a list . Tried using the following code but error which says

 Cannot read property '3' of undefined

Json Response

   [{"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"]}]

cal.html

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

cat.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();
  }
);
}

try to console this finalresult[3] and check whether your able to get proer data...and please share the finalresult along with question as json instead of pic — Sa E Chowdary
– Sa E Chowdary, Commented Jun 29, 2017 at 10:52
try using the elvis operator like this: *ngFor="let element of finalresult?[3]" — sebaferreras
– sebaferreras, Commented Jun 29, 2017 at 10:53
@sebaferreras Parser Error: Conditional expression finalresult?[3] requires all 3 expressions at the end of the expression [let element of finalresult?[3]] — Sumi
– Sumi, Commented Jun 29, 2017 at 10:59
hmm and if you wrap all that ngFor inside of a <div *ngIf="finalresult && finalresult[3]">... ngForHere...</div>? — sebaferreras
– sebaferreras, Commented Jun 29, 2017 at 11:13
@SaEChowdary Updated my JSON response and console this finalresult[3] — Sumi
– Sumi, Commented Jun 29, 2017 at 11:19

Iris_geek · Accepted Answer · 2017-06-29 11:58:16Z

4

You can do in simple steps. In your .ts file

1) First stringify your result. Here randomData is your JSON response

var stringifiedData = JSON.stringify(this.randomData);

2) Parse the stringified data

var parsedData = JSON.parse(stringifiedData);

this.displayData = parsedData;

3) In yout HTML

<ion-row>
<ion-col *ngFor="let data of displayData">{{data.name}}</ion-col>
</ion-row>

answered Jun 29, 2017 at 11:58

Iris_geek

3936 silver badges19 bronze badges

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

1 Comment

The Sammie Over a year ago

After 3 hours of trying to figure out what the problem was, finally.

Sumi · Accepted Answer · 2017-06-29 11:44:59Z

I Solved the issue by updating cat.ts file.

finalresult= [];


getdata(){

this.loading.present();

 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();
    }
);
}

Collectives™ on Stack Overflow

Ionic 2 : Loop through List of Arrays in Object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related