JS如何从每个循环内的数组中的数组中获取对象值答案

【问题标题】：JS How to get the object value from an array inside of an array inside an each loopJS如何从每个循环内的数组中的数组中获取对象值
【发布时间】：2016-05-06 21:48:59
【问题描述】：

我正在尝试从 json 文件中获取值

这是我在 codepen.io/krm218/pen/vGvaNN 上工作的实时代码笔

这是我的 json 文件的截图或前往https://api.myjson.com/bins/4ky5s

我正在尝试从图像数组中检索主视图、alt-view-1 等。我已经能够使用此代码获取其他值，例如 description 和 id

 $.getJSON("json.json", function(data){
  $.each(data.products, function() {
  $("#results").append(
   this["id"] + this["description"]
   );   
  });  
});

当我做this["images"]时，我得到了

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

我怎样才能得到这些值？

【问题讨论】：

您可以将实际对象作为代码发布吗？
images 是另一个数组，您可以像使用其他值一样获取这些值，循环并访问数组内的对象，然后访问属性等。
看起来您正在将图像对象强制转换为字符串。你在某处使用this["images"] 上的+ 运算符吗？
codepen.io/maio/pen/jqdPeB
@maioman 成功了。谢谢！！就是 this.images[0]['main-view']

标签： javascript jquery arrays loops

【解决方案1】：

您可以通过以下方式进入：

Working Example

var arr = obj.products;

for (var i = 0; i < arr.length; i++) {
  var images = arr[i].images;
  for (var img in images) {
    console.log(images[img]);
  }
}

【讨论】：

这会进入我拥有的每个循环吗？在此处查看代码codepen.io/krm218/pen/vGvaNN
好吧，您现在需要做的就是将 var arr = obj.products 更改为 var arr = data.products，我刚刚在笔中尝试过，它可以工作
我明白了！谢谢@JordanHendrix。

【解决方案2】：

我稍微修改了您的 JSON，以便将图像存储为您的产品对象下的对象（如关联数组），所以这是我开始使用 JSON 的地方（我只添加了一个产品）：

var data = {
  products:[
    {
      description:'Matte black',
      id:1,
      images:{
        "main-view":'/images/1/mainView.png',
        "alt-view-1":"/images/1/altView1.png",
        "alt-view-2":"/images/1/altView2.png",
        "alt-view-3":"/images/1/altView3.png",
        "alt-view-4":"/images/1/altView4.png",
        "alt-view-5":"/images/1/altView5.png"
      }
    }
  ]
};

使用该格式的它们，您可以使用 jQuery each 函数循环遍历图像，参数是每个函数中的键名和值。您可以通过循环和使用 k 和 v 分别打印它们的键和值来构建它们的图像列表（或使用值）：

$.each(data.products, function(){

  var imageList = $("<div>").addClass("image-list");

  $.each(this.images, function(k, v){
    imageList.append(
      $("<div>").addClass('image').append(
        $("<span>").addClass('image-name').append(k + " = "),
        $("<span>").addClass('image-url').append(v)
      )
    );
  });

  $('#results').append(
    $("<div>").addClass('product').append(
      $("<div>").addClass('product-id').append(this.id),
      $("<div>").addClass('product-desc').append(this.description),
      imageList
    )
  );
});

结果应如下所示：

1
Matte black
main-view = /images/1/mainView.png
alt-view-1 = /images/1/altView1.png
alt-view-2 = /images/1/altView2.png
alt-view-3 = /images/1/altView3.png
alt-view-4 = /images/1/altView4.png
alt-view-5 = /images/1/altView5.png

这是一个 Fiddle 演示：https://jsfiddle.net/5yc733k4/

【讨论】：

嗨@mark.hch 感谢您的回复。不幸的是，我无法更改 json 文件结构，因此必须弄清楚如何按原样进行。

【解决方案3】：

this.images[0]['main-view'] 成功了！

【讨论】：