प्रिंट JSON पार्स वस्तु?


200

मुझे एक जावास्क्रिप्ट ऑब्जेक्ट मिला है जिसे JSON का उपयोग करके पार्स किया गया है JSON.parseमैं अब ऑब्जेक्ट प्रिंट करना चाहता हूं इसलिए मैं इसे डीबग कर सकता हूं (फ़ंक्शन के साथ कुछ गलत हो रहा है)। जब मैं निम्नलिखित करूँ ...

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

मुझे कई [ऑब्जेक्ट ऑब्जेक्ट] सूचीबद्ध हैं। मैं सोच रहा हूं कि सामग्री को देखने के लिए मैं इसे कैसे प्रिंट करूंगा?


5
एक संतान के रूप में, (obj में संपत्ति) सभी संपत्तियों को सूचीबद्ध करेगा, यहां तक ​​कि विरासत में मिली संपत्ति भी। इसलिए आपको Object.prototype और किसी भी 'मदर क्लास' के लिए बहुत सारे एक्सट्रॉनिक एक कॉमनिंग मिलेंगे। यह json ऑब्जेक्ट्स के साथ असंबद्ध है। आपको उन्हें केवल उन गुणों को प्राप्त करने के लिए hasOwnProperty () के साथ फ़िल्टर करना होगा जो इस ऑब्जेक्ट के स्वामी हैं।
BiAiB

जवाबों:


124

अधिकांश डिबगर कंसोल सीधे वस्तुओं को प्रदर्शित करने का समर्थन करते हैं। महज प्रयोग करें

console.log(obj);

आपके डीबगर के आधार पर यह सबसे अधिक संभावना कंसोल में ऑब्जेक्ट को एक ढह गए पेड़ के रूप में प्रदर्शित करेगा। आप पेड़ को खोल सकते हैं और वस्तु का निरीक्षण कर सकते हैं।


122
यह ध्यान देने योग्य है कि क्रोम (और शायद अन्य ब्राउज़र) में जब इस तरह एक स्ट्रिंग के साथ जोड़ा जाता है: console.log("object: " + obj)यह ऑब्जेक्ट को प्रदर्शित नहीं करता है, बल्कि "ऑब्जेक्ट: [ऑब्जेक्ट obj]" को आउटपुट करेगा।
शाहर

24
@Shahar console.log("object: %O", obj)(क्रोम) या console.log("object: %o", obj)(फ़ायरफ़ॉक्स | सफारी) आपको वस्तु विवरण तक पहुंच प्रदान करेगा, नीचे मेरा उत्तर देखें।
डेव एंडरसन

1
@DaveAnderson कंसोल में ऑब्जेक्ट फॉर्मेटिंग के लिए अच्छा शॉट।
लेकेंट

@ शाहर धन्यवाद, आपकी जरूरत की जानकारी थी। जवाब में जोड़ा जाना चाहिए।
लियो फ्लेहर्टी

3
@DaveAnderson की विधि के अलावा, वस्तुओं से तारों को अलग करने के लिए अल्पविराम का उपयोग करके भी काम किया जा सकता है:console.log("My object: ", obj)
Shahar

571

आपको पता है कि JSON का मतलब क्या है? जावास्क्रिप्ट ऑब्जेक्ट संकेतन । यह वस्तुओं के लिए एक बहुत अच्छा प्रारूप बनाता है।

JSON.stringify(obj) आप वस्तु का एक स्ट्रिंग प्रतिनिधित्व वापस दे देंगे।


12
मुझे आश्चर्य है कि यह उत्तर सबसे नीचे है ...... यह स्वीकृत उत्तर होना चाहिए :-)
मिंग्यू

1
क्या होगा यदि आप एक स्ट्रिंग प्रतिनिधित्व नहीं चाहते हैं, लेकिन वस्तु के रूप में यह एक कोड संपादक में दिखाई देगा?
सुपरब्यूपरडू

5
@SuperUberDuper: ... तो आप एक स्ट्रिंग प्रतिनिधित्व बनाने की कोशिश नहीं करेंगे, अब, आप करेंगे। :)
cHao

मेरा मानना ​​है कि SuperUberDuper पूछ रहा था कि क्या ऑब्जेक्ट लॉग किया जा सकता है या इसे स्ट्रिंग में कनवर्ट किए बिना देखा जा सकता है। यदि ब्राउज़र में देख रहे हैं कि DOM को एक तत्व की आवश्यकता है, तो आप json को कड़े कर सकते हैं और पृष्ठ पर देखने के लिए उस स्ट्रिंग में इनर HTML के लिए एक तत्व सामग्री सेट कर सकते हैं।
jasonleonhard

उदाहरण के लिए: Json को './data.json' से आयात करें; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
jasonleonhard

54

console.dir()इसके बजाय प्रयास करेंconsole.log()

console.dir(obj);

MDN का कहना console.dir()है कि इसके द्वारा समर्थित है:

  • FF8 +
  • IE9 +
  • ओपेरा
  • क्रोम
  • सफारी

1
केवल IE9 + में उपलब्ध है
जावास्क्रिप्ट

3
console.dir()FF8 +, ओपेरा, क्रोम और सफारी में भी उपलब्ध है: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre

महान! यह मेरे लिए सबसे अच्छा समाधान है। धन्यवाद।
होआंग ले

1
नोड जे एस के बारे में क्या?
Xsmael

अच्छा है, लेकिन लॉग ("स्ट्रिंग" + वैरिएबल) जैसे स्ट्रिंग कॉन्टेनेटेशन का समर्थन नहीं करता है
नासिम

47

यदि आप इंडेंटेशन के साथ एक सुंदर, बहुभाषी JSON चाहते हैं तो आप JSON.stringifyइसके 3 तर्क के साथ उपयोग कर सकते हैं :

JSON.stringify(value[, replacer[, space]])

उदाहरण के लिए:

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

या

JSON.stringify(obj, null, 4);

आप निम्नलिखित परिणाम देंगे:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

एक ब्राउज़र console.log(obj)में भी बेहतर काम करता है, लेकिन एक शेल कंसोल (नोड.जेएस) में यह नहीं है।



25

स्ट्रिंग स्वरूपों का उपयोग करें;

console.log("%s %O", "My Object", obj);

क्रोम में निम्नलिखित के साथ प्रारूप विनिर्देशक हैं ;

  • %s एक स्ट्रिंग के रूप में मूल्य को प्रारूपित करता है।
  • %dया %iपूर्णांक के रूप में मान का प्रारूपण करता है।
  • %f मान को फ़्लोटिंग पॉइंट मान के रूप में बनाता है।
  • %o एक विस्तार योग्य DOM तत्व (एलिमेंट्स पैनल के रूप में) के रूप में मूल्य को प्रारूपित करता है।
  • %O एक विस्तार योग्य जावास्क्रिप्ट ऑब्जेक्ट के रूप में मूल्य को प्रारूपित करता है।
  • %c आपके द्वारा प्रदान की जाने वाली CSS शैलियों के अनुसार आउटपुट स्ट्रिंग को प्रारूपित करता है।

फ़ायरफ़ॉक्स में स्ट्रिंग पदार्थ भी हैं जिनके समान विकल्प हैं।

  • %oएक हाइपरलिंक को जावास्क्रिप्ट ऑब्जेक्ट पर आउटपुट करता है। लिंक पर क्लिक करने से एक इंस्पेक्टर खुल जाता है।
  • %dया %iएक पूर्णांक आउटपुट करता है। स्वरूपण अभी तक समर्थित नहीं है।
  • %s एक स्ट्रिंग आउटपुट करता है।
  • %fएक फ्लोटिंग-पॉइंट वैल्यू आउटपुट करता है। स्वरूपण अभी तक समर्थित नहीं है।

सफारी में प्रिंटफ शैली के प्रारूप हैं

  • %dया %iपूर्णांक
  • %[0.N]f सटीक के एन अंकों के साथ फ्लोटिंग-पॉइंट मूल्य
  • %o वस्तु
  • %s तार

1
अच्छा संदर्भ उत्तर
डेविड

1
% O वास्तव में मददगार है
everton

4

अच्छा और सरल:

console.log("object: %O", obj)

1
क्या आप कृपया वर्णन कर सकते हैं कि% O किसके लिए है? यह ओ विशेष रूप से होना चाहिए? - आपका समाधान एक आकर्षण की तरह काम करता है
एंथोनियस

ओ वस्तु के लिए खड़ा है, इसलिए जब तक ऑब्जेक्ट स्ट्रिंग के रूप में छपाई कर सकता है, तब तक इसे बिना किसी मुद्दे के साथ मुद्रित किया जाना चाहिए। इससे मुझे कई मामलों में समस्या निवारण में मदद मिली है, जहां मुझे यकीन नहीं था कि त्रुटि कहां है
मेभनलिमा

मैं यहाँ सूचित करना भूल गया, वास्तव में हमें% O का उपयोग करने की आवश्यकता नहीं है। हम सीधे कंसोल.लॉग ("ऑब्जेक्ट:", obj) का उपयोग कर सकते हैं, धन्यवाद @mbenhalima
Anthonius

3

महज प्रयोग करें

console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);

और आपको यह क्रोम कंसोल में मिलेगा:

CONSOLE LOG : 
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR : 
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object

2

एक वस्तु या एक सरणी की सामग्री को सचेत करने के लिए सरल कार्य।
इस फ़ंक्शन को किसी सरणी या स्ट्रिंग या किसी ऑब्जेक्ट के साथ कॉल करें जो सामग्री को सचेत करता है।

समारोह

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

प्रयोग

var data = [1, 2, 3, 4];
print_r(data);

2

निम्न कोड अलर्ट बॉक्स में पूरा जसन डेटा प्रदर्शित करेगा

var data= '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

json = JSON.parse(data);
window.alert(JSON.stringify(json));

2

यदि आप डीबग करना चाहते हैं तो कंसोल डीबग का उपयोग क्यों नहीं करें

window.console.debug(jsonObject);

0

यदि आप एक सर्वर पर js में काम कर रहे हैं, तो बस थोड़ा और अधिक जिम्नास्टिक एक लंबा रास्ता तय करता है ... यहाँ मेरा प्रस्ताव है (सुंदर-प्रिंट-ऑन-सर्वर):

ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));

जो कुछ बनाने का एक धमाकेदार काम करता है जो मैं वास्तव में पढ़ सकता हूं जब मैं सर्वर कोड लिख रहा हूं।


0

मैं नहीं पता है कि कैसे इसे आधिकारिक तौर पर बनाया कभी नहीं किया गया था, लेकिन मैं अपने को जोड़ दिया है jsonविधि करने के लिए consoleआसान मुद्रण stringified लॉग के लिए वस्तु:

जावास्क्रिप्ट में ऑब्जेक्ट्स (नॉन-प्राइमिटिव्स) का अवलोकन करना क्वांटम मैकेनिक्स की तरह एक सा है..क्या आप "माप" वास्तविक स्थिति नहीं हो सकते हैं, जो पहले से ही बदल चुके हैं।

console.json = console.json || function(argument){
    for(var arg=0; arg < arguments.length; ++arg)
        console.log(  JSON.stringify(arguments[arg], null, 4)  )
}

// use example
console.json(   [1,'a', null, {a:1}], {a:[1,2]}    )

कई बार किसी वस्तु के कड़े संस्करण को देखने की आवश्यकता होती है क्योंकि इसे (जैसे कि कच्ची वस्तु) प्रिंट करना उस वस्तु के "लाइव" संस्करण को प्रिंट करेगा जो कार्यक्रम के बढ़ने के साथ ही परिवर्तित हो जाता है, और इससे वस्तु की स्थिति का पता नहीं चलेगा। उदाहरण के लिए, लॉग-ऑफ-टाइम पर:

var foo = {a:1, b:[1,2,3]}

// lets peek under the hood
console.log(foo) 

// program keeps doing things which affect the observed object
foo.a = 2
foo.b = null
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.