JSON属性在带有p5.js的JavaScript中未定义

我刚刚开始学习编码，这是我在这里的第一篇帖子，所以如果我在这里违反了任何规则，请原谅我。。。。 这是我的问题，看起来很简单，但我不知道问题出在哪里。我有一个JSON文件，如下所示：

{"imgj":
[
    {
        "id":"1",
        "user_id":"1",
        "tag":"siteplan",
        "imageurl":"images/cb.jpg"          
    },
    {
        "id":"2",
        "user_id":"2",
        "tag":"floorplan",
        "imageurl":"images/cbb.jpg"             
    },
    {
        "id":"3",
        "user_id":"1",
        "tag":"section",
        "imageurl":"images/postit.png"          
    },
    {
        "id":"4",
        "user_id":"2",
        "tag":"siteplan",
        "imageurl":"images/avatar_default.jpg"  
    }
]
}

在我的.js文件中，我试图从JSON文件中获取img的数据，但总是失败

 p.preload=function(){

                      var url ='imglist.json';
                      imglist = p.loadJSON(url);


                       for(var i=0; i<4; i++) {

                        imgurl = imglist.imgj[i].imageurl;

                        img[i]=p.loadImage("imgurl");
                      }

                    };

---

我的JSON文件似乎已作为对象成功读取，但无法读取其属性。这真的很奇怪。

这应该是可行的，但这只是一种解决办法。我不知道如何访问loadJSON创建的这个非自有属性

p.preload= function(){

      var url ='imglist.json';
      fetch(url)
        .then(data=>data.json())
        .then(imglist=>{
             //imglist = p.loadJSON(url);

             console.log(imglist.imgj[0]); // Object { id: "1", user_id: "1", tag: "siteplan", imageurl: "images/cb.jpg" }
             for(let i = 0;i< imglist.imgj.length;i++) {

                 imgurl = imglist.imgj[i].imageurl;

                 img[i]=p.loadImage(imgurl);
             }});

};

p.preload=函数（）{
var url='imglist.json'；
获取（url）
.then（data=>data.json（））
.然后（imglist=>{
//imglist=p.loadJSON（url）；
console.log（imglist.imgj[0]）；//对象{id:“1”，用户_id:“1”，标记：“siteplan”，图像URL:“images/cb.jpg”}
for（设i=0；i

经过一系列修改后，我认为loadJSON在幕后实际上是异步的，因此在文件加载完成之前，for循环将继续执行

您可以将

imglist

存储在全局/类范围变量中，并在

setup

或

draw

函数中执行for循环

var imglist;
var imgs;

p.preload = function() {
  var url = 'imglist';
  imglist = loadJSON(url);
}

p.setup = function() {
  imgs = imglist.map(function(imglistitem) { 
    return loadImage(imglistitem.imageurl); 
  });
}

我不太清楚p5.js在幕后是如何连接的，但参考中的示例使用

draw（）

函数来区分json：

---

什么是

p

以及更重要的

loadJSON

/

loadImage

方法？我看不出问题的真正根源。@sleepy pen如果

loadJSON

是异步函数，您必须使用wait或then语法在适当的时候运行其余的代码。如果您

console.log（imglist.imgj）

？那么

console.log（Array.isArray（imglist.imgj））

呢？您是否有机会在公共p5.js web编辑器（或其他onilne编辑器）中运行该示例？如果是这样，就更容易help@Zydnar我明白你的意思，也许这个console.log（）会在加载完成后运行。但即便如此，为什么下一行的

imglist.imgj[1]

没有定义？嗨，Zydnar，似乎所有的PIC都可以使用fetch API加载，但它们不能再在fetch函数之外调用（也不能调用数组的长度）……有可能解决这个问题吗？谢谢你；）@sleepy pen这是因为fetch是异步的，所以有两种方法可以解决这个问题-要么返回整个fetch链，要么返回inside last.then（）返回所需的输出，当调用preload函数时，以相同的链方式使用它。然后。。。或者在函数参数中使用callback并调用它来发挥您的魔力。非常感谢Zydnar！我会搜索更多关于回调的信息，并尝试找出答案；）谢谢。真的从中学到了很多；）为了进一步澄清，这被称为承诺链

fetch

返回一个承诺（您应该明确查看）。处理异步代码的另一个选项是使用

async

和

wait

，您也应该查看它们。@ViggoV非常感谢Viggo；）没问题，很乐意帮忙：）

var imglist;
var imgs;

p.preload = function() {
  var url = 'imglist';
  imglist = loadJSON(url);
}

p.setup = function() {
  imgs = imglist.map(function(imglistitem) { 
    return loadImage(imglistitem.imageurl); 
  });
}