使用 html 在浏览器中显示 JSON 字典答案

【问题标题】：Display JSON dictionary in browser using html使用 html 在浏览器中显示 JSON 字典
【发布时间】：2014-08-15 09:23:46
【问题描述】：

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

如何用 html 打开 JSON 文件？我很高兴将整个 JSON 文件显示在 html 脚本上，但我希望能够将 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 文件的内容来完成。

提前致谢。

【问题讨论】：

要在初始 HTML 页面之外加载 JSON，您需要使用后台请求（通常称为 AJAX）来执行此操作。加载 JSON 数据的最简单方法是使用带有可靠文档、示例等的 Javascript 库，以及执行所需操作的简单界面。 Jquery can help you there
感谢所有回复的人！我将尝试所有这些答案，看看哪个最适合我的项目。后续问题：很多人提到jquery（@Brian）这被广泛认为是“正确”的做法吗？我应该继续下载吗？
jQuery 不是“正确”的做法，但是与调用 jQuery 的 getJSON 方法相比，进行自己的 AJAX 调用是一个非常复杂的过程。您的代码向我表明您对 Javascript 开发相对较新（我们都曾经是没有错的：P），因此，像 jQuery 这样的库可能是一个很好的跳板让您继续前进:)
谢谢布赖恩，我会调查的。

标签： javascript html json browser

【解决方案1】：

您需要使用 AJAX 提取 JSON。

这将要求您运行 Web 服务器，例如某些浏览器，例如Chrome 会阻止对本地资源的请求。还要记住，AJAX 和 JSON 请求只能在同一个域（同源策略）内工作，否则您将不得不使用 JSONP。

如果您可以使用 jQuery（因此这是一种最简单的方法），请看这里：http://api.jquery.com/jquery.getjson/

$.getJSON( "test.json", function( data ) {
  $.each( data, function( key, val ) {
    // do something
  });
});

希望对你有帮助！

【讨论】：

感谢您的帮助！

【解决方案2】：

我看到你没有包含 jquery 标签，所以我将提供几个 vanilla 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。

如果您在本地没有文档，或者上述方法对您来说过于makeshifty，也可以使用此方法。请参阅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 集合。

【讨论】：

我真的很喜欢这个答案（数字 1），但这是一个预先存在的 json 文件（不是我制作的，我想我应该添加）虽然我能够添加 .js 扩展名，但我'我不确定如何添加 **var data = '[{...}]' ** 参数。
@Isa 只需将整个 JSON 字符串用引号 ' 或双引号 " 括起来，使其成为字符串并将它们分配给 data var，查看我更新的答案。
对不起，我不明白该怎么做。我的代码需要能够使用 json 文件，而不需要我去操作实际的 .json 文件。如何远程添加变量（因为没有更好的词）？
对不起，我明白了。在这种情况下，最好的办法是使用 REST 方法（第二种解决方案）检索文件，但文件需要位于同一域或同一服务器中。
非常感谢，我会试一试

【解决方案3】：

您可以通过使用诸如 PHP 之类的服务器端语言来完成此操作，而无需 ajax。您可以将原始 JSON 包含到 Javascript 变量中。

以下是使用 PHP 包含文件的示例：

<script>

    //JSON included via PHP
    var books = <?php include('books.json'); ?>;

</script>

“books.json”文件将包含您的原始 JSON 信息：

{ "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 }
   ]    
}

【讨论】：

我将如何调用这些对象？ “books.pascal.name”？换句话说，PHP 是否会改变格式？（真的很新，在这里。对不起）
PHP 不会更改您的文件，它会按原样包含文件。您将能够像访问任何 javascript 对象一样访问 JSON 对象。