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

Question

我刚刚开始学习编码，这是我在这里的第一篇文章，所以如果我在这里违反任何规则，请原谅我......所以这是我的问题，看起来很简单，但我无法弄清楚问题出在哪里. 我有一个这样的 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 文件已成功读取为对象，但无法读取它的属性。这真的很奇怪。

标签： javascriptjson

Answer 1

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

};