सवाल मैं जावास्क्रिप्ट का उपयोग कर JSON को कैसे प्रिंट कर सकता हूं?


मैं JSON को आसानी से पढ़ने (मानव पाठकों के लिए) प्रारूप में कैसे प्रदर्शित कर सकता हूं? मैं मुख्य रूप से इंडेंटेशन और व्हाइटस्पेस के लिए देख रहा हूं, शायद रंग / फ़ॉन्ट-शैलियों / आदि के साथ भी।


1666
2018-01-26 22:33


मूल


के संभावित डुप्लिकेट मैं जेएसओएन प्रोग्रामेटिक रूप से कैसे सुशोभित कर सकता हूं? - hippietrail
@hippietrail meta.stackoverflow.com/q/251938/3853934 - Michał Perłakowski
अगर आप सिर्फ एचटीएमएल पर आउटपुट कर रहे हैं, तो आप इसे एक में लपेट सकते हैं <pre> टैग। - Ryan Walker


जवाब:


सुंदर मुद्रण में मूल रूप से लागू किया गया है JSON.stringify()। तीसरा तर्क सुंदर प्रिंटिंग को सक्षम बनाता है और स्पेसिंग को उपयोग करने के लिए सेट करता है:

var str = JSON.stringify(obj, null, 2); // spacing level = 2

यदि आपको सिंटैक्स हाइलाइटिंग की आवश्यकता है, तो आप कुछ रेगेक्स जादू का उपयोग कर सकते हैं:

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

यहां कार्रवाई में देखें: jsfiddle

या नीचे दिया गया एक पूर्ण स्निपेट:

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }


3709
2017-08-28 10:56



सुपर कमाल। मैंने डिबगिंग के लिए एक नई विंडो में इसे खोलने के लिए एक फ़ंक्शन जोड़ा: var json = syntax हाइलाइट (JSON.stringify (obj, अपरिभाषित, 4);); var w = window.open (); var html = "<head> <style> pre {रूपरेखा: 1 पीएक्स ठोस # सीसीसी; पैडिंग: 5 पीएक्स; मार्जिन: 5 पीएक्स;} .स्ट्रिंग {रंग: हरा;}"; एचटीएमएल + = ".number {रंग: darkorange;} .boolean {रंग: नीला;} .null {रंग: magenta;} .key {रंग: लाल;} </ style> </ head> <body>"; एचटीएमएल + = "<pre>" + json + "</ pre>"; w.document.writeln (एचटीएमएल); - JayCrossler
अच्छा लगा। भूलें कि इसे सीएसएस और ए की जरूरत है <pre>, हालांकि। - NoBugs
कुछ कारणों से, जब मैं इसे चेतावनी देता हूं, तो यह वास्तव में स्वरूपित दिखाता है हालांकि मैं एक फ्लैट स्ट्रिंग दिखाता हूं जब मैं इसे jQuery के माध्यम से एक div पर थूकता हूं: $ ("# लेनदेन प्रतिक्रिया")। ()। html (prettifyObject (डेटा), शून्य, '\ t'); जहां prettifyObject एक विधि है जिसे मैंने बनाया है जिसमें ऊपर आपकी पहली दो पंक्तियां हैं। - PositiveGuy
@CoffeeAddict सुनिश्चित करें कि आपका #transactionResponse तत्व है white-space: pre; एक सीएसएस शैली के रूप में। - user123444555621
ध्यान दें कि stringify(...) JSON पर काम करता है वस्तुओं, जेएसओएन तारों पर नहीं। यदि आपके पास स्ट्रिंग है, तो आपको इसकी आवश्यकता है JSON.parse(...) प्रथम - Vihung


यदि आपके पास उपयोगकर्ता Pumbaa80 का जवाब बहुत अच्छा है वस्तु आप बहुत मुद्रित चाहते हैं। यदि आप एक वैध JSON से शुरू कर रहे हैं तार कि आप सुंदर मुद्रित करना चाहते हैं, आपको इसे पहले किसी ऑब्जेक्ट में कनवर्ट करना होगा:

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  

यह स्ट्रिंग से JSON ऑब्जेक्ट बनाता है, और उसके बाद JSON स्ट्रिंगिफ़ के सुंदर प्रिंट का उपयोग करके इसे स्ट्रिंग में परिवर्तित कर देता है।


181
2018-06-21 20:35



यह मेरे लिए काम किया, लेकिन एक त्रुटि का उपयोग कर फेंक दिया JSON.parse इसलिए मैंने इसे संशोधित किया JSON.stringify(jsonString, null, 2)। आपके JSON / ऑब्जेक्ट पर निर्भर करता है। - Jazzy
ध्यान दें कि स्ट्रिंग को प्रदर्शित करते समय आपको इसे लपेटने की आवश्यकता होती है <pre></pre> टैग। - Undistraction
@Jazzy JSON.parse केवल तभी मर जाता है जब आपके पास एक अवैध JSON str है या यह पहले से ही किसी ऑब्जेक्ट में परिवर्तित हो गया है ... सुनिश्चित करें कि आप जानते हैं कि आप कोशिश कर रहे हैं कि आप किस डेटाटाइप से निपट रहे हैं JSON.parse - Kolob Canyon
@Undistraction आपकी टिप्पणी मेरे लिए उपयोगी थी, मैं वास्तव में जांचने की आवश्यकता की जांच करूँगा pre कर देता है। - Dhaval Jardosh
@Jazzy यदि आपको ऐसा करना था, तो आपके पास JSON स्ट्रिंग नहीं थी, आपके पास सामान्य ऑब्जेक्ट था। जेएसओएन है हमेशा एक स्ट्रिंग। यह जावास्क्रिप्ट ऑब्जेक्ट का सिर्फ एक स्ट्रिंग-आधारित प्रतिनिधित्व है। - Clonkex


Pumbaa80 के उत्तर के आधार पर मैंने console.log रंगों का उपयोग करने के लिए कोड को संशोधित किया है (निश्चित रूप से क्रोम पर काम कर रहा है) और HTML नहीं। कंसोल के अंदर आउटपुट देखा जा सकता है। आप फ़ंक्शन के अंदर _variables को कुछ और स्टाइल जोड़कर संपादित कर सकते हैं।

function JSONstringify(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

यहां एक बुकमार्कलेट है जिसका आप उपयोग कर सकते हैं:

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0);

उपयोग:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

संपादित करें: वेरिएबल्स घोषणा के बाद, मैंने इस पंक्ति के साथ% प्रतीक से बचने की कोशिश की:

json = json.replace(/%/g, '%%');

लेकिन मुझे पता चला है कि क्रोम कंसोल में भागने का% समर्थन नहीं कर रहा है। अजीब ... शायद यह भविष्य में काम करेगा।

चीयर्स!

enter image description here


23
2018-01-29 13:16



मैंने यूआर कोड का इस्तेमाल किया लेकिन मुझे जेसन प्रारूप में आउटपुट मिल रहा है लेकिन मुझे रंग नहीं मिल रहा है और आखिरकार मुझे रंग टैग मिल रहा है यह आउटपुट {"त्रुटि" है: {"कोड": 0, "संदेश": "ओ"}}, रंग: लाल, रंग: लाल, रंग: darkorange - ramesh027
एक बुकमार्कलेट के रूप में उपयोग का सुझाव देने के लिए +1! धन्यवाद - Renato Gama


मैंने उपयोग किया JSONView क्रोम एक्सटेंशन (यह उतना सुंदर है जितना यह हो जाता है :):

संपादित करें: जोड़ा गया jsonreport.js

मैंने एक ऑनलाइन स्टैंड-अलोन JSON सुंदर प्रिंट व्यूअर, jsonreport.js भी जारी किया है, जो एक मानव पठनीय एचटीएमएल 5 रिपोर्ट प्रदान करता है जिसका उपयोग आप किसी भी JSON डेटा को देखने के लिए कर सकते हैं।

आप प्रारूप के बारे में और अधिक पढ़ सकते हैं नई जावास्क्रिप्ट एचटीएमएल 5 रिपोर्ट प्रारूप


20
2018-01-26 22:37



मुझे एक जावास्क्रिप्ट * .js लाइब्रेरी चाहिए जो HTML तत्वों और कक्षाओं को जोड़ने वाले JSON स्ट्रिंग को सुंदर प्रिंट कर सकता है। Var परिणाम = prettyPrint ('{"key": "value"}') की तरह कुछ; - Mark
यह बहुत अच्छा है, क्योंकि इसे आसानी से जोड़ा जाता है। आप कलर सेटिंग्स भी बदल सकते हैं <3 - Luca Steeb


आप उपयोग कर सकते हैं console.dir(), जो एक शॉर्टकट है console.log(util.inspect())। (केवल अंतर यह है कि यह किसी भी कस्टम को छोड़ देता है inspect() एक वस्तु पर परिभाषित समारोह।)

यह उपयोगकर्ता है वाक्य - विन्यास पर प्रकाश डालना, स्मार्ट इंडेंटेशन, कुंजी से उद्धरण हटा देता है और आउटपुट को जितना सुंदर हो जाता है उतना ही बनाता है।

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

और कमांड लाइन के लिए:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"


16
2017-11-14 09:46



इसे प्राप्त करने के किसी भी तरीके से यह विस्तार शुरू होता है? - Daniel Sokolowski
@DanielSokolowski का क्या मतलब है? - adius
क्रोम डेवलपर टूल्स में मुझे वें ऑब्जेक्ट कुंजियों पर जाने के लिए छोटे त्रिकोण पर क्लिक करना होगा, इसे ऑटो विस्तारित करने के किसी भी तरीके से? snag.gy/7wPqsl.jpg - Daniel Sokolowski
MH। अच्छा प्रश्न। मुझे एक के बारे में पता नहीं है, लेकिन यह वास्तव में सहायक होगा ... - adius


बेहतर तरीका।

जावास्क्रिप्ट में जेएसओएन ऐरे को सुंदर बनाएं

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

11
2017-10-21 10:19



क्या और कैसे बेहतर है? - Dan Dascalescu
@DanDascalescu उपर्युक्त सभी से बेहतर है? - adamj


var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

एचटीएमएल में प्रदर्शित होने के मामले में, आपको एक बाली जोड़नी चाहिए <pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

उदाहरण:

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
div { float:left; clear:both; margin: 1em 0; }
<div id="result-before"></div>
<div id="result-after"></div>


7
2018-03-01 15:42