如何使Fetch API從JSON文件返回鍵及其值，而不是在控制台中返回整個文件

Question

我試圖使用fetch（）解析JSON文件中的key：values以便在輪播中使用這些值（我從JSON文件中獲取圖像路徑。）當我將其設置為登錄控制台時，而不是返回單個鍵和值，而是返回整個數組。

這是我目前的代碼。 基本的fetch（）。

fetch('http:/localhost/x/y/z/propimg.json')
.then( res => res.json() )
.then( (id) => {
  console.log({id});
})

甚至有可能做我想做的事情嗎？ JSON文件中有數千個ID，並且有許多常見ID附加到圖像的各個文件路徑中。 例如：

[
  [
    {
      "id": "31514711",
      "image": "/localhost/x/y/z/img/31514711-0.jpg"
    },
    {
      "id": "31514711",
      "image": "/localhost/x/y/z/img/31514711-1.jpg"
    },
    {
      "id": "31514711",
      "image": "/localhost/x/y/z/img/31514711-2.jpg"
    },
    {
      "id": "31514711",
      "image": "/localhost/x/y/z/img/31514711-3.jpg"
    }
  ]
]

我試圖解析這些內容，以便將它們附加到圖像輪播中，該圖像輪播顯示與文件中“ id”關聯的所有圖像。

任何幫助是極大的贊賞。 謝謝。

---

根據注釋，這是控制台輸出的示例：

{id: Array(1)}
    id: Array(1)
        0: Array(276512)
            [0 ... 9999] (etc.)
                [0 ... 999] (etc.)
                    0: {id: "31514711", image: "/localhost/x/y/z/img/31514711-0.jpg"}
                    1: {id: "31514711", image: "/localhost/x/y/z/img/31514711-1.jpg"}
                    2: {id: "31514711", image: "/localhost/x/y/z/img/31514711-2.jpg"}
                    3: {id: "31514711", image: "/localhost/x/y/z/img/31514711-3.jpg"}
                    4: {id: "31514711", image: "/localhost/x/y/z/img/31514711-4.jpg"}
                    5: {id: "31514711", image: "/localhost/x/y/z/img/30093175-0.jpg"}
                    6: {id: "30093175", image: "/localhost/x/y/z/img/30093175-1.jpg"}
                    7: {id: "30093175", image: "/localhost/x/y/z/img/30093175-2.jpg"}
                    8: {id: "30093175", image: "/localhost/x/y/z/img/30093175-3.jpg"}
                    (etc.)

---

編輯：更新的代碼以顯示我正在嘗試做的事情，希望可以更清楚地做到：

fetch('localhost/x/y/z/propimg.json') 
 .then( (res) => res.json() ) 
 .then( (output => { 
  var img = output; 
  for (var i = 0; i < img.length; i++) { 
   console.log("ID:", img[i].id); 
   console.log("Image:", img[i].image); 
  } 
}))

換句話說，我想返回每個ID及其圖像路徑。 我想做的就是將其送入react-image-gallery，並使其僅顯示與ID相關聯的圖像。

Answer 1

由於您的瀏覽器將耗盡內存，因此無法一次顯示圖庫中的所有圖像，因此應使用react-image-gallery的lazyLoad功能：

<ImageGallery items={images} lazyLoad/>

但是<ImageGallery>要求數據具有不同的鍵名，因此您必須更改PHP腳本才能獲得以下內容：

images = [
  {
     original: '/localhost/x/y/z/img/31514711-0.jpg',
     thumbnail: '/localhost/x/y/z/img/31514711-0_thumbnail.jpg'
  },{
     original: '/localhost/x/y/z/img/31514711-1.jpg',
     thumbnail: '/localhost/x/y/z/img/31514711-1_thumbnail.jpg'
  }
]

如果您只想在本地運行，那很好。 如果要稍后將其部署到Web，則當然必須調整URL。