Prettify生成されたJSON

私が生成している形式のJSONを出力しようとしていますが、動作していないようです。私は各JSONオブジェクトをすべてタブ付きにして、非常に読みやすいように正しく配置したいと思います。私はここで間違って何をしていますか？Prettify生成された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/

出典

2016-07-20 Jon

ブラウザでは、デフォルトでHTMLのエスケープスペースが使用されます。

<pre>タグを使用すると役立ちます。

<body>にテキストを挿入する代わりに、<pre>タグまたは「書式設定済みのテキスト」セクションを持つようにhtmlを変更してみてください。

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>

出典

2016-07-20 17:08:03

ああ、彼らはスペースをエスケープ実現しませんでした。もちろん。ありがとう、ルイス！ – Jon

あなたがやっていることは、実際に働いています。問題は、htmlは、そうするように指示しない限り、追加している空白を気にしないということです。必要なのは<pre>...</pre>タグです。これにより、htmlがあなたのwhitespaesを認識し、それに応じてJSONが表示されます。これを行うには、たとえば、最後の行を$("body").text(jsonPretty);から$("body").html("<pre>" + jsonPretty + "</pre>");に変更します。これは一番クリーンな解決策ではないかもしれませんが、問題なく動作するはずです。

出典

2016-07-20 17:04:22

答えて

関連する問題