使用纯javascript或es6从json文件导入数据[重复]答案

【问题标题】：Importing data from a json file using pure javascript or es6 [duplicate]使用纯javascript或es6从json文件导入数据[重复]
【发布时间】：2019-06-04 13:40:25
【问题描述】：

我正在处理一个 html 项目，我必须从 json 文件中导入一些数据（无法编辑），我需要使用纯 javascript 或 ES6 来执行此操作，但我不知道如何执行此操作，因为我所知道的一切我都应用在了代码上，但它没有用。现在，我只想获取 json 文件中的背景图像的链接，所以如果我可以访问数据，那么我之后的工作就很简单了。使用我上面编写的工具如何工作的一个小例子将对我有很大帮助。

json文件链接：https://sample-api-78c77.firebaseio.com/tv-shows/SHOW123.json

【问题讨论】：

你能和我们分享你到目前为止尝试过的代码吗？另外，请避免链接，如果可以的话，最好在问题本身中包含示例数据。
您好，欢迎来到 SO！到目前为止，我可能会建议您添加MCVE，以便人们可以帮助解决问题。就问题而言，它有点笼统，通常通过快速访问谷歌来回答，因此您可能会期望相应的投票关闭/否决票，但不要让它阻止您使用 SO 作为它的重要问答资源是！
感谢大家的回答，以及 Chris W. 的提示，我是新来的，我意识到有人已经在这里发布了类似的问题，所以我会将这篇文章标记为重复我会看看那个帖子来尝试解决我的问题。

标签： javascript html json ecmascript-6

【解决方案1】：

您使用称为ajax的技术导入数据

const url = 'https://sample-api-78c77.firebaseio.com/tv-shows/SHOW123.json'

fetch(url)
  .then(res => res.json())
  .then(json => console.log(json.Images.Background))

【讨论】：

【解决方案2】：

通过 XMLHttpRequest 在纯 js 中

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

function reqListener () {
  console.log(JSON.parse(this.responseText).Images.Background);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "https://sample-api-78c77.firebaseio.com/tv-shows/SHOW123.json");
oReq.send();

【讨论】：