p5.js中读取JSON文件时属性返回undefined的问题求助

嘿，欢迎加入编程大家庭！第一次发帖完全不用紧张，咱们一起拆解你遇到的问题~

你的代码其实就差两个小细节，调整后就能正常工作了：

1. 变量引用错误：别把变量名当字符串 #

你在加载图片的时候写了：

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

这里的双引号会让程序把imgurl当成一个固定的文件名，而不是你从JSON里提取出来的变量值。把引号去掉就好：

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

2. 别忘了初始化图片数组 #

你直接给img[i]赋值，但如果之前没声明并初始化img数组，很可能会触发报错。建议在preload函数外面先定义好：

let img = [];

优化建议：用数组长度遍历更稳妥 #

你现在用固定的i<4来循环，但如果JSON里的图片数量变了，代码就失效了。改成遍历数组的实际长度会更灵活：

p.preload=function(){ 
  var url ='imglist.json'; 
  imglist = p.loadJSON(url); 
  img = [];
  // 用imglist.imgj的实际长度循环
  for(var i=0; i<imglist.imgj.length; i++) { 
    let imgurl = imglist.imgj[i].imageurl; 
    img.push(p.loadImage(imgurl)); 
  } 
};

另外，你可以在setup函数里打印一下img数组，确认图片是否成功加载：

p.setup = function() {
  console.log("加载的图片数组：", img);
}

关于你提到的控制台显示imglist.imgj[1]返回undefined，大概率是浏览器控制台的“实时更新”特性导致的——你看到的imglist是它最终的状态，但你打印imglist.imgj[1]时，preload里的JSON可能还没完全加载完成？不过preload函数本身就是用来等待所有资源加载完毕的，修正上面的代码后，这个问题也会跟着解决。

内容的提问来源于stack exchange，提问作者sleepy-pen