Javascript 加载外部 JSON 中的所有键答案

【问题标题】：Javascript load all the keys in external JSONJavascript 加载外部 JSON 中的所有键
【发布时间】：2021-12-10 20:09:58
【问题描述】：

我在位置 /data/words.json 有外部 JSON

{
    "sports":       ["golf", "hockey", "football"],
    "animals":      ["giraffe", "snake", "lizard", "puma"],
    "video games":  ["pacman", "asteroids", "super mario brothers", "donkey kong"]
}

我需要在我的 javascript 函数中访问它。我已按如下方式加载文件：

<script type="text/javascript" src="./data/words.json"></script>

如何打印给定 JSON 的所有键并在浏览器上打印？请注意，提供的 JSON 没有变量名。

【问题讨论】：

您是使用纯 JavaScript 还是使用 Node/基于 Node 的框架？
我使用的是纯 JavaScript。
你为什么不直接fetch呢...？
这能回答你的问题吗？ HTML/Javascript: how to access JSON data loaded in a script tag with src set
@esqew 你能提供一个代码sn-p吗？

标签： javascript json

【解决方案1】：

JSON 从来没有打算以这种方式加载，您可能已经发现了。为什么不直接使用fetch (if your expected execution environment supports it)？

const jsonData = await fetch('./data/words.json').then(res => res.json());

根据您说“打印给定 JSON 的所有键并在浏览器上打印”时的确切想法，您可以很容易地完成此操作：

Object.keys(jsonData).forEach(key => console.log(key));

【讨论】：

【解决方案2】：

编写一个原生 ECMAScript 模块，将 JSON 加载到一个常量中，然后对其进行操作。脚本运行前也不需要导入。

编辑：

忘记了我使用纯 JavaScript 的旧方法，只记得您还需要在本地计算机上运行 Web 服务器才能正确加载资源，即使它们存储在本地。

<script type="module">
  import * as words from './data/words.json';

  const wordsObj = JSON.parse(words);
  const wordsKeys = Object.keys(wordsObj);
  const wordsSpan = document.createElement("span");

  for (let i = 0; i < wordsKeys.length; i++) {
    wordsSpan.innerHTML += wordsKeys[i] + "<br>";
  }

  document.getElementByTagName("body").appendChild(span);
</script>

【讨论】：