Question

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

如何用html打开JSON文件？我很高兴在html脚本上显示整个JSON文件，但我希望能够将其设置为变量，并像普通的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文件的内容来做。

提前致谢。

Answer 1

您需要使用AJAX拉取JSON。

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

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

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

希望它有所帮助！

Answer 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。

如果您没有本地文档或上述方法对您来说太 makehifty ，请使用此方法。请参阅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集合。

Answer 3

通过使用PHP等服务器端语言，您可以在不需要ajax的情况下完成此操作。您可以将原始JSON包含在Javascript变量中。

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

<script>

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

</script>

文件＆＃34; books.json＆＃34;将包含您的原始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 }
   ]    
}

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

3 个答案: