选择 Javascript 中具有 array != 空的所有 json 对象

Question

获取 file.json 时，我在通过 javascript 返回正确的数据时遇到问题。原来的代码行太多，所以我将写一个更短的示例以使其更清晰。

我的 data.json 文件看起来像这样：

data.json

{ 

  "01": {

     "id" : "01",

     "title" : "example1",

     "size" : "100",

     "pictures" : []

  },

  "02": {

     "id" : "02",

     "title" : "example2",

     "size" : "0",

     "pictures" : []

  },

  "03": {

     "id" : "03",

     "title" : "example3",

     "size" : "300",

     "pictures" : [

       { "pic_name1" : "example_pic1", "source" : "http://example.pic/1234" },

       { "pic_name2" : "example_pic2", "source" : "http://example.pic/4321" },

     ]

  },

  

}

我的获取工作正常，我可以打印出我想要的数据。例如，我不想获取具有“size”=“0”且有效的对象。不起作用的是第二个条件：我只想获取具有一些图片的对象（换句话说，图片 !== [] 的对象）并且我想要每个对象中的第一张图片。

这是我的函数的一部分：

main.js

getData().then(data => {

    for (const key in data) {

      if (data.hasOwnProperty(key)) {

        if (data[key].size !== "0" && data[key].pictures !== []  ) {  

             div.innerText = data[key].size;                        // This prints the right data in DOM

             img.src = data[key].pictures[0].source                 // This gives an error

        }

      }

   });

我在检查器中得到的错误是：

类型错误：无法读取未定义的属性“源”（索引）：94

！！！如果我对对象的 id 进行硬编码而不是编写 [key]，则此代码有效，如下所示：

img.src = data[01].picture[0].source           //  This is return the picture of the selected object

但当然，我需要为每个对象获取正确的图片。知道如何解决这个问题吗？谢谢！

Answer 1

检查图片的长度，例如data[key].pictures.length > 0代替data[key].pictures !== []let data = {   "01": {     "id" : "01",     "title" : "example1",     "size" : "100",     "pictures" : []  },  "02": {     "id" : "02",     "title" : "example2",     "size" : "0",     "pictures" : []  },  "03": {     "id" : "03",     "title" : "example3",     "size" : "300",     "pictures" : [       { "pic_name1" : "example_pic1", "source" : "http://example.pic/1234" },       { "pic_name2" : "example_pic2", "source" : "http://example.pic/4321" },     ]  },  }for (const key in data) {  if (data.hasOwnProperty(key)) {    if (data[key].size !== "0" && data[key].pictures.length>0){         console.log(data[key].size);                             console.log(data[key].pictures[0].source);    }  }}