Question

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

How can I pretty-print JSON using JavaScript?

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

Answer 1

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

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

您还将生成的数据附加到<div>（output函数中前面提到的未使用，因为您从未调用该函数），并且您在示例中没有CSS会导致空白区域显着，所以你还需要改变它。

对于一般情况，使用innerHTML也不安全。 JSON可能包含&或<字符，因此您应使用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>

Answer 2

你有问题：

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

Demonstration

Json漂亮的功能不起作用

2 个答案: