-1

我是 Javascript 新手，我必须使用漂亮的函数打印 Json 输出，但输出不如预期，它只是打印正常，但我期待缩进。我也浏览了以下链接，任何人都可以帮助我为什么这不起作用。

如何使用 JavaScript 漂亮地打印 JSON？

<html>
<script type="text/javascript">
    function showJson(){    
        var jsonString = "{array:[1,2,3],boolean:true,null:null,number:123,object:{a:b,c:d,e:f},string:Hello World}";
        document.getElementById('json_output').innerHTML = JSON.stringify(jsonString, null, '\t');
    }

    function output(inp) {
        document.body.appendChild(document.createElement('pre')).innerHTML = inp;
    }


</script>
<body>
    <input type="button" onclick="showJson();" value="Click Me!!">
    <br>
    <br>
    STRING FROM DEVICE : <div id='json_output'>HI</div>
</body>

4

2 回答 2

1

您将无效的 JSON 文本作为JSON.stringify. 如果要将 JavaScript 对象字符串化为 JSON 文本，则需要：

  1. 修复 JSON 文本中的错误
  2. 将您拥有的 JSON 文本转换为 JavaScript 对象（使用JSON.parse）。

您还将生成的数据附加到 a <div>（函数中提到的 preoutput未使用，因为您从不调用该函数），并且示例中没有 CSS 会导致空白很重要，因此您还需要改变它。

对于一般情况，使用innerHTML也不安全。JSON 可能包含&or<字符，因此您应该使用createTextNode它来确保任何此类字符都被适当地转义。

<!DOCTYPE html>

<html>
<script type="text/javascript">
    function showJson(){    
      var jsonString = '{"array":[1,2,3],"boolean":true,"null":null,"number":123,"object":{"a":"b","c":"d","e":"f"},"string":"Hello World"}';
        var obj = JSON.parse(jsonString);
        document.getElementById('json_output').innerHTML = "";
        document.getElementById('json_output').appendChild(document.createTextNode(JSON.stringify(obj, null, '\t')));
    }
</script>
<body>
  <input type="button" onclick="showJson();" value="Click Me!!">
  <p>STRING FROM DEVICE:</p>
  <pre id='json_output'>HI</pre>
</body>
于 2013-05-19T14:28:31.080 回答
0

你有三个问题：

  • 您尝试对字符串进行字符串化，而不是对象，在解析您的 JSON 之前：JSON.stringify(JSON.parse(jsonString), null, '\t');
  • 您的 JSON 无效，您需要在字段名称和字符串值周围加上引号
  • 您将其放在格式丢失的 div 元素中。改用 PRE 元素：<pre id='json_output'>HI</pre>

示范

于 2013-05-19T14:27:34.293 回答