在 JavaScript 中美化 JSON 数组 [重复]答案

【问题标题】：Prettify JSON Array in JavaScript [duplicate]在 JavaScript 中美化 JSON 数组 [重复]
【发布时间】：2012-07-06 17:46:32
【问题描述】：

可能重复：
JSON pretty print using JavaScript

我正在开展一个项目，该项目将用于帮助平台的未来开发人员分析和理解 JSON 数组。我正在引用 Facebook 出色的 Graph Explorer 页面 seen here，并希望将我们的数组输出为一个美化的、正确的制表符缩进和换行符数组，就像它在资源管理器上所做的那样。

数组被输出到textarea，因此我认为我遇到了换行和制表符的问题。我也尝试过使用美化库，但没有成功。

例子：

{"outcome" : "success", "result" : {"name" : "messaging-sockets", "default-interface" : "external", "include" : [], "socket-binding" : {"messaging" : {"name" : "messaging", "interface" : null, "port" : 5445, "fixed-port" : null, "multicast-address" : null, "multicast-port" : null}, "messaging-throughput" : {"name" : "messaging-throughput", "interface" : null, "port" : 5455, "fixed-port" : null, "multicast-address" : null, "multicast-port" : null}}}, "compensating-operation" : null}

收件人：

{
   "outcome":"success",
   "result":{
      "name":"messaging-sockets",
      "default-interface":"external",
      "include":[

      ],
      "socket-binding":{
         "messaging":{
            "name":"messaging",
            "interface":null,
            "port":5445,
            "fixed-port":null,
            "multicast-address":null,
            "multicast-port":null
         },
         "messaging-throughput":{
            "name":"messaging-throughput",
            "interface":null,
            "port":5455,
            "fixed-port":null,
            "multicast-address":null,
            "multicast-port":null
         }
      }
   },
   "compensating-operation":null
}

【问题讨论】：

另见stackoverflow.com/questions/2614862/…
还有jsonlint.com - 如果这可以帮助您减少工作量！ :)
@limelights 这看起来是个不错的工具，但是数组总是有效的，所以我们不需要测试它们，更多只是更整洁地可视化它们。
@RyanBrodie 是的，但我认为它非常整齐地可视化了数组，尽管并不完全像你想要的那样。
@limelights 我们正在使用 HTML 5 的网络套接字与数组流对齐，而不仅仅是一个，否则该解决方案将是完美的。

标签： javascript jquery html json

【解决方案1】：

您可以使用JSON.stringify:

JSON.stringify(jsonobj,null,'\t')

请参阅demo。

更新：如果你没有jsonobj，但有json字符串，那么在使用stringify函数之前，通过这一行将json字符串转换为json对象：

jsonobj = JSON.parse(jsonstring);

【讨论】：

不工作 - 输出类似于 "{\"streamtype\":\"returnAll\"}，作为字符串，没有换行符或制表符。
@RyanBrodie 你需要通过Object，而不是String，这就是你得到这样结果的原因。要将字符串转换为对象，请使用JSON.parse(yourstring)，然后传递给JSON.stringify 函数。所以你需要这样做：JSON.stringify(JSON.parse(yourstring),null,'\t')
对我不起作用。我试试这个，它仍然没有格式化： $("#transactionResponse").show().html(JSON.stringify(data, null, '\t'));其中 data 是我的 jQuery #.ajax() 回调中的响应 json
感谢@Engineer！