Javascript 如何使fetchapi从JSON文件返回一个键及其值，而不是在控制台中返回整个文件

我试图使用fetch解析JSON文件中的key:value，以便在旋转木马中使用这些值，我从JSON文件中获取图像路径。当我将其设置为登录控制台时，它不是返回单个键和值，而是返回整个数组

这是我目前的代码。基本提取

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

甚至可以用fetch做我想做的事吗？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关联的图像。

由于您无法一次显示gallery中的所有图像，因为您的浏览器将耗尽内存，您应该使用react image gallery的lazyLoad功能：

但要求数据具有不同的键名，因此您必须更改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。

您的问题不是很清楚。你可以用你想要的任何东西来解决fetch返回的承诺。如果您展示了一个想要返回的数据示例，也许我们可以帮助api请求无法更改从后端服务器发送的内容。后端的工作是返回您想要的内容。如果您无法控制响应，则可以在获取响应后自己解析它。@rvor这根本不是我想要的。API调用会将数据返回给您。你的申请不满意的数据怎么办？您希望处理哪些数据？@rvor为了回应Phil的说法，您确实需要更改服务器端正在发生的事情。从服务器发回的数据太多了。Fetch API不知道也不关心您如何与服务器交互，只是通过HTTP进行交互。您可以限制返回的数据。我希望能够将key:value对放入变量中，并使用这些变量让应用程序显示文件夹中的图像。例如，类似于var id=keyid和var images=keyimages的内容，然后返回与这些键相关联的值。我将此与react-image-gallery一起使用。让我们一起使用。@rvor请查看聊天。