Prettify Generierte JSON

Ich versuche, formatierten JSON auszugeben, den ich erzeuge, aber es scheint nicht zu funktionieren. Ich möchte, dass jedes JSON-Objekt alle Tabstopps und Abstände hat, um gut lesbar zu sein. Was mache ich hier falsch?Prettify Generierte 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/

Quelle

2016-07-20 Jon

Browser standardmäßig standardmäßig Leerzeichen in HTML.

Verwendung eines <pre> Tags kann helfen.

Anstatt zu versuchen, den Text in <body> einzufügen, versuchen Sie, Ihr HTML zu ändern, um ein <pre> Tag oder einen "vorformatierten Text" Abschnitt zu haben.

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>

Quelle

2016-07-20 17:08:03

Ahh, nicht erkennen, sie Räume entkommen. Na sicher. Danke, Lewis! – Jon

Was Sie tun, tatsächlich arbeiten wird. Das Problem ist, dass html sich nicht um die Leerzeichen kümmert, die Sie hinzufügen, es sei denn, Sie sagen es dazu. Was Sie brauchen, ist das <pre>...</pre> Tag. Dadurch wird HTML Ihre Whitespas erkennen und Ihren JSON entsprechend anzeigen. Um dies zu tun, könnten Sie zum Beispiel Ihre letzte Zeile von $("body").text(jsonPretty); zu $("body").html("<pre>" + jsonPretty + "</pre>"); ändern. Dies ist möglicherweise nicht die sauberste Lösung, aber es funktioniert und sollte Ihr Problem deutlich machen.

Quelle

2016-07-20 17:04:22

Antwort

Verwandte Themen