使用p5.js在JavaScript中未定义JSON属性

时间:2019-01-09 15:34:20

标签: javascript json

我刚刚开始学习编码,这是我在这里的第一篇文章,因此,如果我违反这里的任何规则,请原谅我。 所以这是我的问题,这似乎很简单,但我无法弄清楚问题出在哪里。我有一个像这样的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");
                      }

                    };

控制台结果如下:

                      console.log(typeof imglist == 'object'); //return true
                      console.log(imglist); //return {} imgj:(4)[{...},{...},{...},{...}]
                      console.log(imglist.imgj[1]); //return undefined

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

2 个答案:

答案 0 :(得分:0)

这应该可以,但是这只是获取解决方法。我不知道如何访问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);
             }});

};

答案 1 :(得分:0)

经过一番摆弄之后,我相信loadJSON实际上是在幕后异步的,因此您的for循环会在文件加载完成之前继续执行。

您可以将imglist存储在全局/类范围变量中,并在setupdraw函数内部进行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: https://p5js.org/reference/#/p5/loadJSON