typescript Ionic 2：循环遍历对象中的数组列表

Ionic 2 : Loop through List of Arrays in Object

提问by Sumi

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

我有一个来自 JSON 的浏览器控制台输出，其中包含对象中的数组列表。我需要在列表中打印对象（姜黄粉、香菜粉）的名称字段。尝试使用以下代码但错误说

 Cannot read property '3' of undefined 

Json Response

JSON 响应

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

cal.html

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

cat.ts

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

采纳答案by Sumi

I Solved the issue by updating cat.ts file.

我通过更新 cat.ts 文件解决了这个问题。

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

回答by Iris_geek

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

您可以通过简单的步骤完成。在您的 .ts 文件中

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

1）首先将您的结果字符串化。这里的 randomData 是你的 JSON 响应

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

2) Parse the stringified data

2) 解析字符串化数据

var parsedData = JSON.parse(stringifiedData);

this.displayData = parsedData;

3) In yout HTML

3) 在你的 HTML 中

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