使用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文件已作為對象成功讀取，但無法讀取其屬性。 真的很奇怪

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);
             }});

};

Answer 2

經過一番擺弄之后，我相信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分開： https : //p5js.org/reference/#/p5/loadJSON