Question

我有一个JSON文件jsquiz.json，其中包含：

{
"firstname": "Kane",
"secondname": "Brown",
"sports": ["basketball","hockey"]
}

我在同一目录jsquiz.html中有一个单独的文件，我希望显示JSON文件中的信息：

...
<ul>
  <li id="first"></li>
  <li id="last"></li>
  <li id="sport1"></li>
  <li id="sport2"></li>
</ul>
...

从阅读各种来源我认为我必须使用.parse()方法从JSON文件中创建一个JavaScript对象，但我对如何从一个JSON信息中导入JSON信息感到有点遗憾。外部文件？

任何帮助表示赞赏，

由于

Answer 1

您可以使用XMLHttpRequest从JSON文件加载数据。

此示例将一直阻止，直到加载为止：

var yourJSONObject = {} // will later be filled with the data
var req = new XMLHttpRequest();
req.open('GET', 'http://www.example.com/jsquiz.json', false); 
req.send(null);
if(req.status == 200) // 200 request status
  yourJSONObject = JSON.parse(req.responseText);
}

此示例将在后台加载：

var yourJSONObject = {} // will later be filled with the data
var req = new XMLHttpRequest();
req.open('GET', 'http://www.example.com/jsquiz.json', true); 
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
      yourJSONObject = JSON.parse(req.responseText);
  }
};
req.send(null);

不幸的是，并非所有浏览器都默认允许XMLHttpRequest使用本地文件。某些浏览器可能需要稍微改变配置以允许它。

Answer 2

将json文件更改为有效的js变量：

var jsonData = {
 "firstname": "Kane",
 "secondname": "Brown",
 "sports": ["basketball","hockey"]
}

然后在你的页面中：

<script src="jsquiz.json"></script>

现在在您加载后的页面中，您可以使用名为jsonData

的变量

Answer 3

问题是您无法轻松访问本地文件。您必须在页面中包含该文件（如Exlord所说），或者使用某个Web服务器通过HTTP导出它并使用jQuery（如henje说）或直接（如Philipp）加载它。

如果你有Python，可以使用以下方法导出文件：

python -m SimpleHTTPServer 8000

（其他工具也可以帮助你）。

Answer 4

您可以使用AJAX请求该文件，只要它在您的Web目录中（使用JQuery）

$.ajax({url: "jsquiz.json",})
  .done(function(response) {
    data = JSON.parse(response);
    console.log(data);
  });

然后你只需要创建一个新的DOMElement并添加它。

如何解析本地JSON文件

4 个答案: