javascript - 使用html在浏览器中显示JSON字典

所以我在 StackExchange 和其他网络论坛上看了又看又看了不同的答案，但我仍然不明白这一点。我有一个 .json 文件，其中包含 Excel 文档中的信息。我想在网络浏览器上显示它 -> 最简单的方法似乎是用 html 编写它。

如何用 html 打开 JSON 文件？我很高兴在 html 脚本上显示整个 JSON 文件，但我希望能够将 is 设置为变量并像普通 JSON 对象一样从中提取内容。

我有下面的代码用于制作一个表格，这就是我想要做的 - 但真正的 JSON 对象位于单独的文件中。

<html>
<head>
<title>Creation of array object in javascript using JSON</title>
<script language="javascript" >

document.writeln("<h2>JSON array object</h2>");

var books = { "Pascal" : [ 
      { "Name"  : "Pascal Made Simple", "price" : 700 },
      { "Name"  : "Guide to Pascal", "price" : 400 }
   ],                       
   "Scala"  : [
      { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
      { "Name"  : "Scala in Depth", "price" : 1300 }
   ]    
}    

var i = 0
document.writeln("<table border='2'><tr>");
for(i=0;i<books.Pascal.length;i++)
{   
   document.writeln("<td>");
   document.writeln("<table border='1' width=100 >");
   document.writeln("<tr><td><b>Name</b></td><td width=50>"
   + books.Pascal[i].Name+"</td></tr>");
   document.writeln("<tr><td><b>Price</b></td><td width=50>"
   + books.Pascal[i].price +"</td></tr>");
   document.writeln("</table>");
   document.writeln("</td>");
}

for(i=0;i<books.Scala.length;i++)
{
   document.writeln("<td>");
   document.writeln("<table border='1' width=100 >");
   document.writeln("<tr><td><b>Name</b></td><td width=50>"
   + books.Scala[i].Name+"</td></tr>");
   document.writeln("<tr><td><b>Price</b></td><td width=50>"
   + books.Scala[i].price+"</td></tr>");
   document.writeln("</table>");
   document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>

澄清一下:上面的代码效果很好；但我想使用保存在本地驱动器上的 .json 文件的内容来完成此操作。

提前致谢。

最佳答案

我发现您没有包含 jquery标签，所以我将提供一些普通 javascript 解决方案:

如果文件位于可访问的目录中，您可以像这样提取数据:

按如下方式定义 JSON 对象:

原文:
```
[{ "name" : "John", "date" : "01-27-2014"  }]
```
修改为javascript:
```
var data = '[{ "name" : "John", "date" : "01-27-2014"  }]';
```
并将其保存到名为 mydata.json.js 的纯文本文档中(例如，双扩展名与内容本身无关)。

因此它成为一个有效的 javascript 文件，您可以将其加载到您的 html 上，如下所示:
```
<script src="mydata.json.js"></script>
```
您可以正常在 HTML 上使用 data var。

或者，如果您本地没有该文档，或者上述方法对您来说太临时了，请使用此方法。引用this question 。引用:

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
            if (success) {
                success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

将其称为:

loadJSON('my-file.json',
    function(data) { console.log(data); },
    function(xhr) { console.error(xhr); }
);

更新:

您可以创建一个全局变量，例如data，存储检索到的JSON并重新定义函数，如下:

if (xhr.readyState === 4 && xhr.status === 200) {
    data = JSON.parse(xhr.responseText); // This now contains the JSON object.
}

请注意，xhr.responseText 是原始 JSON 字符串，JSON.parse(…) 函数返回包含该 JSON 数据的 JavaScript 集合。

关于javascript - 使用html在浏览器中显示JSON字典，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24398082/

javascript - 使用html在浏览器中显示JSON字典

上一篇：javascript - HTML5/js与flash-like的比较

下一篇：javascript - 我可以在 Backbone.collections 中创建自定义方法吗？