时间戳

首页 > 解决方案 > 无法将服务器上的 JSON 文件提取到 Javascript 数组中

javascript - 无法将服务器上的 JSON 文件提取到 Javascript 数组中

问题描述

我对使用 Javascript 尤其是 JSON 很陌生，而且我一直在努力做到这一点：

我的 Web 服务器上有一个 JSON 文件，我正在尝试访问它并将其解析为 JavaScript 对象。我想要做的是将该 JSON 解析为一个数组，然后根据其他用户变量进一步操作该数组。

这是 JSON 的样例：

{"log":
[{
"name":"Al",
"entries":[8,12,16,19]},
{"name":"Steve",
"entries":[11,17,22]}]}

我需要做的是检索其中一个条目的数组并将其作为 JavaScript 对象存储在数组中。我试图做的是：

var entriesLogged;

fetch ('url to the json file').then(function(response){
  return response.json();
}).then(function(data){
  entriesLogged = data.log[0].entries;
});

但是，我似乎无法让它工作并以在此范围之外持续存在的方式将值分配给变量。我已经能够使用 console.log 输出数组的值，但是我还不能像对象一样实际使用和操作该数据。理想情况下，我希望将 JSON 文件从服务器解析到全局数组中。

到目前为止，我遇到的大多数教程都使用 JSON 文件来输出控制台日志或更改 html 元素的内容，但是我需要先将 JSON 中的值检索到全局数组中。

我在这里错过了什么吗？有人对如何做到这一点有建议吗？

最良好的祝愿，多姆

标签： javascriptarraysjsonfetch-api

解决方案

对于这个问题的变体，有大量的“答案”实际上并不能解决问题，它们只是描述了问题。（tl；博士解决方案是最后一段代码）

问题是.fetch('URL.json')并且是“.json()异步”调用。因此，脚本将开始处理该调用，然后继续处理脚本中的其余命令，而.fetch()and.json()调用仍在处理中。如果您在这些异步调用之一完成之前点击命令，则脚本的其余部分将没有数据可以使用。

有很多地方可以完全理解异步调用在 JS 中的工作原理，例如这里： 如何从异步调用返回响应？

如果您像我一样，并且只希望代码同步运行，那么快速而肮脏的解决方案是创建一个异步主循环，然后确保await在调用需要等待数据的异步函数时使用关键字被填充。

主循环示例：

(async () => {
    // put main loop code here
})();

然后，您可以将代码放在该主循环中，但您必须确保在您使用的每个异步调用之前添加await关键字。在提供的原始示例中，您还必须声明.then()需要使用 await 的函数async。如果您不完全理解 javascript 的异步特性，这会令人困惑，稍后我会对其进行简化，但我想提供原始代码的工作版本，以便您了解更改的内容：

(async () => {
    var entriesLogged;

    await fetch('url_to_the_file.json')
        .then( async function(response){
            return await response.json();
        })
        .then( function(data){
            entriesLogged = data;
        });
})();

该.then()调用通常用于后处理，因此您可以在异步调用内部进行工作...但是由于在此示例中我们故意使其同步，因此我们可以避免所有这些并通过执行单独的简单来清理代码命令：

// Start main loop
(async () => {
    let response = await fetch('url_to_the_file.json');
    let entriesLogged = await response.json();
})();

这应该可以为您提供您正在寻找的东西，并希望让像我们这样的人免于花费数小时的时间来寻找有简单解决方案的东西的心痛。

还想大力呼吁我得到解决方案的地方： https ://www.sitepoint.com/delay-sleep-pause-wait/

推荐阅读