Question

从 <script> 标签读取 JSON

2016-12-01

6677

javascript json object

如何获取嵌入在脚本标记中的 JSON 数据？

<!DOCTYPE html>
<html>
    <head>
        <script id="data" type="application/json">{org: 10, items:['one','two']}</script>
        <script type="text/javascript">
            var obj = JSON.parse( document.getElementById('data').value );
            console.log( obj );
            console.log( obj.org );
        </script>
    </head>
    <body>
    </body>
</html>

我收到：

未捕获的语法错误：JSON 中位置 0 处出现意外标记 u

Answer 1

<script> 元素不是表单控件。它们没有 value 属性（因此，当您读取它时，您会得到 undefined ，当转换为字符串时，它会变成 "undefined" ，这不是有效的 JSON）。

请改为读取元素内文本节点的内容。

您还需要编写 JSON，而不是 JavaScript 对象文字。

属性名称必须是字符串，而不是标识符。
字符串必须用 " 而不是 ' 括起来。

<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>
<script type="text/javascript">
var obj = JSON.parse(document.getElementById('data').firstChild.data);
  console.log(obj);
  console.log(obj.org);
</script>

Answer 2

u 来自“undefined”。尝试：

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

...但请记住，您当前的输入不是 JSON。因此正确格式应为：

<script id="data" type="application/json">{"org":10,"items":["one","two"]}</script>