Question

我试图输出一些我生成的格式化JSON，但它似乎并没有起作用。我希望每个JSON对象都有标签并正确间隔以便可读。我在这里做错了什么？

var arr = new Array(20).fill().map(function() {
  var first = chance["first"]({gender: "male"});
  var last = chance["last"]();
  var company = "DinnerCall";
  var city = chance["city"]();
  var state = chance["state"]();
  var address = chance["address"]();

  return {
    first: first,
    last: last,
    email: first.toLowerCase() + "." + last.toLowerCase() + "@" + company.toLowerCase() + ".com",
    company: company,
    address: address,
    state: chance["state"](),
  };
});

var jsonPretty = JSON.stringify({users: arr}, null, '\t');
$("body").text(jsonPretty);

https://jsfiddle.net/La5qstdd/5/

Answer 1

默认情况下，浏览器以HTML格式转义空格。

使用<pre>标记可以提供帮助。

不要尝试将文字插入<body>，而是尝试将html更改为<pre>标记或“预先格式化的文字”部分。

var json = {
  a: 'Hello',
  b: 'World',
  c: {
    d: 'Hello',
    e: 'World'
  }
};

var jsonPretty = JSON.stringify(json, null, 2);
$(".json-content")
  .text(jsonPretty);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <pre class="json-content">
  </pre>
</body>

Answer 2

你在做什么实际上是在工作。问题是html并不关心你添加的空格，除非你告诉它这样做。您需要的是<pre>...</pre>标记。这将使html识别您的白人并相应地显示您的JSON。为此，您可以将最后一行从$("body").text(jsonPretty);更改为$("body").html("<pre>" + jsonPretty + "</pre>");。这可能不是最干净的解决方案，但它可以工作，并且应该使您的问题清晰。

Prettify Generated JSON

2 个答案: