如何在 JavaScript 中访问 JSON 文件？答案

【问题标题】：How to access JSON file in JavaScript?如何在 JavaScript 中访问 JSON 文件？
【发布时间】：2017-03-08 18:00:34
【问题描述】：

我有一个 JSON 文件作为 data.json，我有一个嵌入了 JavaScript 的 HTML 文件。我想以简单的 HTML(file:///C:/Users/XYZ/Desktop/htmlpage.html) 文件而不是服务器-客户端方式 (http://....) 访问 JSON 文件中的数据。我尝试了以下简单的代码来导入 JSON 文件。

<!DOCTYPE html>
<html>
<body>

<p>Access an array value of a JSON object.</p>

<p id="demo"></p>

<script type="text/javascript" src="F:/Folder/data.json">

var myObj, x;

x = data[0].topic;
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

我看过这个使用方法

<script type="text/javascript" src="F:/Folder/data.json">

关于其他 StackOverflow 问题。但它不起作用。

请告诉我访问 JSON 文件中数据的最简单方法。

【问题讨论】：

JSON 不是 javascript 脚本。它只是一种描述数据的结构化方式。您不能将其作为 javascript 脚本加载。
搜索“打开本地文件 javascript”给出了 this 和 this。
How can I get javascript to read from a .json file?的可能重复
你在用这个做什么？如果它在浏览器中是不可能的。浏览器在这方面具有严格的安全性，不允许您询问机器文件。如果它在某种应用程序中可能有一个解决方案，但它可能取决于你在什么中使用它？

标签： javascript json

【解决方案1】：

您可以尝试在 JSON 文件中编写类似的内容，以便将数据分配给变量：

window.data = JSON.parse('insert your json string here');

然后您可以在页面的 javascript 中访问 window.data。您也可以省略window.，而只分配和/或读取data，这与window.data 相同。

也许更简洁的方法是使用带有 jQuery 或 vanilla Javascript 的 AJAX 请求，这两种方法在此站点上都有很多可用的答案。

您也可以通过jQuery.getJSON():Loading local JSON file 来寻找解决方案

【讨论】：

【解决方案2】：

如果您能够将 PHP 用于您想要的任务（从 JSON 文件访问数据并对数据做一些事情），那么使用 PHP 打开 JSON 文件会更容易。您可以使用以下代码访问 JSON 文件。

<?php
    $str = file_get_contents('data.json');
    $json = json_decode($str, true);
 ?>

这里 $json 将是最外层的对象（如果文件以'{'开头）/数组（如果文件以'['开头）。然后，您可以以常规方式使用它。

也许你们中的一些人会认为我为什么要在 Javascript 问题中发布 PHP 解决方案？但我发现这比用 Javascript 打开文件要容易得多。所以如果你被允许使用 PHP，那就去吧。

【讨论】：