如何访问对象值

Question

我有一个对象数组，我需要选择＆＃39; default_image＆＃39;或者＆＃39;标签＆＃39;或者＆＃39; html＆＃39;使用循环的值。但无法做到这一点。

var panel_array = [{
    "Panel":{
        "Panel_1":{
            "default_image":"http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
            "label":"Panel List 1",
            "html":"<dl class='drop_list1'></dl>"
        },
        "Panel_2":{
            "default_image":"<img src='"+themeUrl+"/prepengine/images/Interactive-items/panel2.png'",
            "label":"Panel List 2",
            "html":"<dl class='drop_list2'></dl>"
        }
    },
    "List":{
        "l1":{
            "default_image":"http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
            "label":"Panel List 1",
            "html":"<dl class='drop_list1'></dl>"
        },
        "l2":{
            "default_image":"<img src='"+themeUrl+"/prepengine/images/Interactive-items/panel2.png'",
            "label":"Panel List 2",
            "html":"<dl class='drop_list2'></dl>"
        }
    },
}]

我尝试了这个并打印了所有值但是如何访问单个值，就像我只想要＆＃39;标签＆＃39;或者我只想要＆＃39; html＆＃39;：

panel_array.map(data => {
                for (var items in data) {
                    for(var dt in data[items]){
                        var ab = data[items];
                        for(var xx in ab) { 
                            var ii = ab[xx];
                            for(var oo in ii){ 
                                console.log(ii[oo]); 
                            }
                        }
                    }
                }
            })

Answer 1

只需添加if clause：

即可

＆＃13;

＆＃13;

var panel_array = [{
    "Panel":{
        "Panel_1":{
            "default_image":"http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
            "label":"Panel List 1",
            "html":"<dl class='drop_list1'></dl>"
        },
        "Panel_2":{
            "default_image":"<img src='/prepengine/images/Interactive-items/panel2.png'",
            "label":"Panel List 2",
            "html":"<dl class='drop_list2'></dl>"
        }
    },
    "List":{
        "l1":{
            "default_image":"http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
            "label":"Panel List 1",
            "html":"<dl class='drop_list1'></dl>"
        },
        "l2":{
            "default_image":"<img src='/prepengine/images/Interactive-items/panel2.png'",
            "label":"Panel List 2",
            "html":"<dl class='drop_list2'></dl>"
        }
    },
}]
panel_array.map(data => {
   for (var items in data) {
     for(var dt in data[items]){
       var ab = data[items];
       for(var xx in ab) { 
           var ii = ab[xx];
           for(var oo in ii){ 
             if (oo == "label" || oo == "html") console.log(ii[oo]); 
           }
       }
     }
   }
})

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用forEach数组，Object.keys和Object.values()

const panel_array = [{
  "Panel": {
    "Panel_1": {
      "default_image": "http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
      "label": "Panel List 1",
      "html": "<dl class='drop_list1'></dl>"
    },
    "Panel_2": {
      "default_image": "<img src='/prepengine/images/Interactive-items/panel2.png'",
      "label": "Panel List 2",
      "html": "<dl class='drop_list2'></dl>"
    }
  },
  "List": {
    "l1": {
      "default_image": "http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
      "label": "Panel List 1",
      "html": "<dl class='drop_list1'></dl>"
    },
    "l2": {
      "default_image": "<img src='/prepengine/images/Interactive-items/panel2.png'",
      "label": "Panel List 2",
      "html": "<dl class='drop_list2'></dl>"
    }
  },
}];


panel_array.forEach(o => {
  Object.keys(o).forEach(key => {
    Object.values(o[key]).forEach(item => {
      //you can access whatever you need
      console.log(item);
    });
  });
});

Answer 3

＆＃13;

＆＃13;

let themeUrl = 'MockmyUrl';
let panel_array = [{
    "Panel":{
        "Panel_1":{
            "default_image":"http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
            "label":"Panel List 1",
            "html":"<dl class='drop_list1'></dl>"
        },
        "Panel_2":{
            "default_image":"<img src="+themeUrl+"/prepengine/images/Interactive-items/panel2.png'",
            "label":"Panel List 2",
            "html":"<dl class='drop_list2'></dl>"
        }
    },
    "List":{
        "l1":{
            "default_image":"http://s3.amazonaws.com/jigyaasa_content_static/interactive_item/panel_1.png",
            "label":"Panel List 1",
            "html":"<dl class='drop_list1'></dl>"
        },
        "l2":{
            "default_image":"<img src='"+themeUrl+"/prepengine/images/Interactive-items/panel2.png'",
            "label":"Panel List 2",
            "html":"<dl class='drop_list2'></dl>"
        }
    },
}];
let images = [];
let lables = [];
let htmls = [];
let output  = panel_array.forEach((ele) => {
  Object.values(ele).forEach((ele2) => {
    Object.values(ele2).forEach((ele3) => {
      let {default_image, label, html} = ele3;
      images.push(default_image);
      lables.push(label);
      htmls.push(html);
    });
  });
});
console.log(images);
console.log('----------------');
console.log(lables);
console.log('----------------');
console.log(htmls);

＆＃13;

＆＃13;

＆＃13;