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

时间:2016-10-01 19:09:21

标签: javascript html json

我有一些带有'application / json'类型的脚本标记的html文件,我试图在我的javascript代码上读取json,这是在单独的文件上并加载到该html。但我只能找到jQuery的例子,我想用纯粹的javascript来做。

以下是关于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'));

2 个答案:

答案 0 :(得分:1)

你的脚本找不到json,因为当js脚本运行时json不在那里,把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中的

答案 1 :(得分:0)

如果您想在JSON元素中嵌入html,可以使用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>