如何从html标签中读取和解析json文件

问题描述：

我有一个类似`application/json'类型的脚本标签的html文件，我正尝试阅读那个json文件，该文件位于单独的文件上并加载到该文件HTML。但我只能找到jQuery的例子，我想用纯javascript来做。如何从html标签中读取和解析json文件

这里是jQuery的一个例子：

<script id="myJson" type="application/json"> 
{ 
    name: 'Foo' 
} 
</script> 

<script type="text/javascript"> 
    $(function() { 
     var x = JSON.parse($('#myJson').html()); 
     alert(x.name); //Foo 
    }); 
</script>

我的代码：

<script src="Game.js"></script> 
<script type="application/json" id="data"> 
{'name':'foo'} 
</script>

Javascript代码：

var json_file = JSON.parse(document.getElementById('data'));

为什么下跌票？请解释，所以我知道我做错了什么。 – Gigalala

您写的json只是javascript，为什么不使用正常的脚本标记并在窗口上显示变量 – synthet1c

使用'

答

您的脚本没有找到JSON作为JSON ISN当js脚本运行时，将json标记放在javascript脚本标记之前。另外，你在那里作为JSON不是（有效的）json。 json有"，而不是'。

所以

<script type="application/json" id="data"> 
    {"name":"foo"} 
</script> 
<script src="Game.js"></script>

会的工作，只要你有类似

JSON.parse(document.getElementById('data').innerHTML)

在Game.js。

答

如果你想在一个html元素嵌入JSON，您可以使用Element.dataset

window.onload = function() { 
 
    console.log(JSON.parse(document.getElementById("myJson").dataset.json)) 
 
}

<script id="myJson" type="text/plain" data-json='{"name":"Foo"}'></script>

如何从html标签中读取和解析json文件

相关推荐