मैं एक जावास्क्रिप्ट ऑब्जेक्ट कैसे प्रदर्शित कर सकता हूं?


1615

जब हम alertएक चर के रूप में एक स्ट्रिंग प्रारूप में जावास्क्रिप्ट ऑब्जेक्ट की सामग्री कैसे प्रदर्शित करते हैं ?

एक ही स्वरूपित तरीका मैं एक ऑब्जेक्ट प्रदर्शित करना चाहता हूं।


7
क्या आप कृपया अपना प्रश्न पुनः लिखेंगे? "स्वरूपित मार्ग" से आपका क्या तात्पर्य है? के रूप में, अमीर स्वरूपण के साथ, जैसे बोल्ड / इटैलिक / आदि?
साशा चेदिगोव

क्या कुछ कंसोल कमांड का उपयोग करके वेरिएबल के मूल्य को प्रिंट करके वेरिएबल के रनटाइम मूल्य को प्रदर्शित करने का एक तरीका है?
BlackPanther

1
@BlackPanther बस करो console.log("", yourObject1, yourObject2, yourObject3, etc...);। एक छोटा संस्करण बस करना है console.log(yourObject1, yourObject2, etc...);
tom_mai78101

2
क्या आप कृपया बेहतर उत्तर चुन सकते हैं जो अधिक सटीक रूप से सामुदायिक सहमति को दर्शाता है?
होल्डऑफ ह्यूंगर

इस तरहconsole.log('a string', aNumber, anObject)
onmyway133

जवाबों:


1067

यदि आप डीबगिंग उद्देश्यों के लिए ऑब्जेक्ट प्रिंट करना चाहते हैं, तो कोड का उपयोग करें:

var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)

प्रदर्शित करेगा:

स्क्रीनशॉट कंसोल क्रोम

नोट: आपको केवल ऑब्जेक्ट लॉग करना होगा । उदाहरण के लिए, यह काम नहीं करेगा:

console.log('My object : ' + obj)

नोट ' : आप logविधि में अल्पविराम का भी उपयोग कर सकते हैं , फिर आउटपुट की पहली पंक्ति स्ट्रिंग होगी और उसके बाद ऑब्जेक्ट को प्रस्तुत किया जाएगा:

console.log('My object: ', obj);

43
जावास्क्रिप्ट कंसोल (Shift + Control + J या Shift + Control + I, क्रोम संस्करण पर निर्भर करता है) का उपयोग करते समय यह फ़ंक्शन Google Chrome पर भी काम करता है। यह भी ध्यान दें कि console.log(obj1, obj2)बहुत अच्छी तरह से काम करता है, इसलिए, आपको console.log()कई चर लॉग करते समय हर वस्तु के लिए कॉल करने की आवश्यकता नहीं है । इसके अलावा, उत्पादन में ऐसी सभी कॉल को हमेशा याद रखें, क्योंकि यह उन ब्राउज़रों को तोड़ देगा जो इसे लागू नहीं करते हैं (जैसे कि इंटरनेट एक्सप्लोरर)।
फेलिक्स

102
हां, यह [ऑब्जेक्ट ऑब्जेक्ट] को प्रिंट करता है, लेकिन इसके पास थोड़ा विस्तार-बटन है, जो आपको ऑब्जेक्ट की सामग्री का निरीक्षण करने देता है।
ह्यूजेस

12
@ यह वास्तव में दोनों कर सकते हैं। मेरे पास एक ऑब्जेक्ट है जिसे मैंने बनाया है: var obj = {"foo": false}; और एक अन्य ऑब्जेक्ट जो एक सर्वर से कॉलबैक में पारित किया जा रहा है, एक कॉलबैक प्रिंट के माध्यम से छोटे तीर से गुजरा है ताकि आप इसे खोल सकें, बिना किसी तीर के साथ सांख्यिकीय रूप से बनाया गया सिर्फ एक प्रिंट [ऑब्जेक्ट ऑब्जेक्ट]। मैं यह भी पता लगाने की कोशिश कर रहा हूँ, किसी भी अन्य विचार?
बेन्स्ट्रा

124
console.log("id:"+obj);सही ढंग से आउटपुट नहीं होगा क्योंकि यह एक स्ट्रिंग को आउटपुट करता है जैसा कि आप इसे वहां देखते हैं, आपको इसे इस तरह निर्दिष्ट करने की आवश्यकता है:console.log("id:"); console.log(obj);
Anriëtte Myburgh

14
कोशिश करो console.log(JSON.stringify(obj))याconsole.dir(obj)
रोबोट लड़का

2008

देशी JSON.stringifyविधि का प्रयोग करें । नेस्टेड ऑब्जेक्ट्स के साथ काम करता है और सभी प्रमुख ब्राउज़र इस विधि का समर्थन करते हैं।

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

मोज़िला एपीआई संदर्भ और अन्य उदाहरणों के लिए लिंक ।

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

यदि आप इस जावास्क्रिप्ट त्रुटि का सामना करते हैं तो एक कस्टम JSON.stringify प्रतिकृति का उपयोग करें

"Uncaught TypeError: Converting circular structure to JSON"

326
अधिक पठनीय आउटपुट के लिए JSON.stringify (obj, null, 4) आज़माएं। यह इसे बड़े करीने से लिखे गए पाठ के रूप में लिखेंगे
बेन क्लेटन

2
JSON.stringify केवल जावास्क्रिप्ट मानों का एक छोटा उपसमूह दिखा सकता है, और बाकी के लिए एक अपवाद फेंक देगा - कंसोल.लॉग में यह समस्या नहीं है।
मोनिका

11
आप मेरे जैसे एक नौसिखिया रहे हैं, मत भूलना console.logयानीconsole.log(JSON.stringify(obj,null, 4));
नीलेश

2
"बिना पढ़ा हुआ टाइपर: ऑबज़र्शन विंडो को JSON में सर्कुलर स्ट्रक्चर में बदलना"।
माइकल

1
मेरे पास ऐसे मामले थे जहां यह काम नहीं करता था: यह {}एक गैर-खाली वस्तु के लिए दिखाया गया था । इसलिए रिटर्न के console.log(obj)समय अपनी वस्तु खाली होने से पहले यह सोचकर जांच अवश्य कर लें । strigify(){}
सिंदूर

394
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

1
यह वही है जो मैं चाहता हूं। मैं गूगल मैप्स v3 का उपयोग कर रहा हूं और दिशा-निर्देशक एक ऑब्जेक्ट देता है। इसमें चार आइटम हैं और इसमें एक ऑब्जेक्ट का नाम बदलता रहता है, इसलिए हमें इसे ढूंढना होगा। उसके लिए इस विधि ने वास्तव में मदद की। इस तरह से हम सभी गुणों और वस्तुओं के नाम प्राप्त कर सकते हैं। या वस्तुओं और गुणों के नाम खोजने का कोई और तरीका है?
जयपाल चंद्रन

34
+1, सभी जावास्क्रिप्ट ब्राउज़र में नहीं चलते हैं या उनमें डीबग किए जा सकते हैं।
बिल यांग

3
आप शायद ज्यादातर समय hasOwnProperty के साथ cruft में निर्मित मास्क लगाना चाहते हैं।
जॉन

9
ओमग - ०: [; 1: ओ; 2: बी; 3: जे; 4: ई; 5: सी; 6: टी; 7:; 8: ओ; 9: बी; 10: जे; 11: ई; 12: सी; 13: टी; 14:];
JSideris

1
इसे खोजने में थोड़ी देर हो गई, लेकिन जैसा कि पिछले साल (29 वें अगस्त) को मेरे जन्मदिन पर अनुरोध किया गया था, यहां काम कर रहा है। jsfiddle.net/MrMarlow/fq53o6o9
MrMarlow

124

console.dir(object):

एक निर्दिष्ट जावास्क्रिप्ट ऑब्जेक्ट के गुणों की एक इंटरैक्टिव सूची प्रदर्शित करता है। यह सूची आपको बाल वस्तुओं की सामग्री की जांच करने के लिए प्रकटीकरण त्रिकोण का उपयोग करने देती है।

ध्यान दें कि console.dir()सुविधा गैर-मानक है। एमडीएन वेब डॉक्स देखें


1
हाँ, यह एक अच्छा समाधान है, हालाँकि यह केवल तभी समाप्त होता है जब आप केवल ऑब्जेक्ट को लॉग करना चाहते हैं (जैसे कंसोल.dir (obj))। यदि आप आउटपुट को स्टिंग को बदलना चाहते हैं, तो यह आपको [ऑब्जेक्ट ऑब्जेक्ट] देगा।
ज़ोमन

इसका एक बड़ा फायदा console.dirयह है कि आप चर को इकट्ठा किए जाने के बाद भी अपने कंसोल में मूल्यों को बढ़ा सकते हैं और पढ़ सकते हैं। इसका वर्णन यहाँ
Dawson B

और इसका एक और फायदा console.dirयह है कि जब आप फाइल को कंसोल को सेव करते हैं, तो सभी प्रॉपर्टीज अपेक्षा के अनुसार फाइल में आ जाती हैं। यह कंसोल कंसोल का उपयोग करते समय ही नहीं होता है।
केपी

79

इसे इस्तेमाल करे :

console.log(JSON.stringify(obj))

यह ऑब्जेक्ट के स्ट्रिंग संस्करण को प्रिंट करेगा। इसलिए [object]आउटपुट के रूप में आपको ऑब्जेक्ट की सामग्री मिल जाएगी।


7
typeerror: Converting circular structure to JSON?
केडन प्रिंस

@KaidenPrince अपनी त्रुटि के लिए यह उत्तर देखें: stackoverflow.com/questions/4816099/… यह संभवत : आपके ऑब्जेक्ट में DOM तत्व है। यदि ऐसा है, तो आप क्रोम या फ़ायरफ़ॉक्स में कंसोल पर लॉग इन करने का सबसे अच्छा प्रयास कर रहे हैं और वहां निरीक्षण करेंगे। अन्यथा आपको कार्य करने के लिए JSON.stringify को कॉल करने से पहले सभी परिपत्र तत्वों को अलग करना होगा।
ऐस हाइज़र

समाधान केवल 2 अलग-अलग आदेशों में विभाजित करना है, यह मानना ​​है कि नहीं: कंसोल.लॉग ("आईडी:"); console.log (obj);
कोलिन चैफिन

66

खैर, फ़ायरफ़ॉक्स (विस्तृत जानकारी के लिए @Bojangles के लिए धन्यवाद) में Object.toSource()विधि है जो वस्तुओं को JSON और के रूप में प्रिंट करती है function(){}

मुझे लगता है कि ज्यादातर डिबगिंग उद्देश्यों के लिए पर्याप्त है।


6
Object.toSource () Chrome के लिए काम नहीं करता है, क्या यह अपेक्षित है? या क्या क्रोम "उन्नत ब्राउज़रों" के अंतर्गत नहीं आता है? =)
tstyle

44
पुराना धागा, बस इसे Google के माध्यम से मिला। .toSource()वास्तव में फ़ायरफ़ॉक्स ही है । बस सोचा था कि मैं आपको बता दूंगा।
Bojangles

52

यदि आप अपने ऑब्जेक्ट को प्रिंट करने के लिए अलर्ट का उपयोग करना चाहते हैं, तो आप ऐसा कर सकते हैं:

alert("myObject is " + myObject.toSource());

इसे प्रत्येक प्रॉपर्टी और उसके संबंधित मूल्य को स्ट्रिंग फॉर्मेट में प्रिंट करना चाहिए।


18
गैर-जेको ब्राउज़र (जैसे क्रोम, सफारी) में toSource () काम नहीं करता है
यारिन

37

यदि आप सारणीबद्ध प्रारूप में डेटा देखना चाहते हैं तो आप उपयोग कर सकते हैं

console.table(obj);

यदि आप टेबल कॉलम पर क्लिक करते हैं तो टेबल को क्रमबद्ध किया जा सकता है।

आप यह भी चुन सकते हैं कि क्या कॉलम दिखाना है:

console.table(obj, ['firstName', 'lastName']);

आप यहाँ पर सांत्वना के बारे में अधिक जानकारी पा सकते हैं


34

NodeJS में आप किसी ऑब्जेक्ट का उपयोग करके प्रिंट कर सकते हैं util.inspect(obj)। गहराई बताना सुनिश्चित करें या आपके पास केवल ऑब्जेक्ट का उथला प्रिंट होगा।


33

समारोह:

var print = function(o){
    var str='';

    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }

    return str;
}

उपयोग:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

उदाहरण:

http://jsfiddle.net/WilsonPage/6eqMn/


प्रिंट विधि पृष्ठ को पीडीएफ में प्रिंट करने के लिए ब्राउज़र को कॉल करें: पी
मारवेन ट्रबेल्सी

@ अगर आपको इफ-इर्द-गिर्द घूमना चाहिए और केवल स्ट्रिंग के बजाय ऑब्जेक्ट की जांच करनी चाहिए। अपडेटेड फिडेल: jsfiddle.net/6eqMn/594
माइकल वाल्टर

1
@wilsonpage यह विफल हो रहा है अगर मैं पूर्ण संपत्ति में पूर्णांक मान जोड़ता हूं :(
ni3

25

बस उपयोग करें

JSON.stringify(obj)

उदाहरण

var args_string = JSON.stringify(obj);
console.log(args_string);

या

alert(args_string);

इसके अलावा, जावास्क्रिप्ट कार्यों में नोट वस्तुओं के रूप में माना जाता है।

एक अतिरिक्त नोट के रूप में:

वास्तव में आप इस तरह की नई संपत्ति असाइन कर सकते हैं और इसे कंसोल तक पहुँच सकते हैं। इसे अलर्ट में प्रदर्शित करें या इसे प्रदर्शित करें

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);

1
यह सवाल खुद कहता है: "जैसे जब हम एक चर को 'अलर्ट' करते हैं," तो यह वास्तव में एक उत्तर नहीं है। और आपके अन्य विकल्प "JSON.stringify (obj)" का पहले ही "Nov 27 2010" में उल्लेख किया गया है, आप केवल इस प्रश्न को डुप्लिकेट और गैर-उत्तर के साथ जोड़ रहे हैं। नए गुणों को निर्दिष्ट करने के बारे में आपकी बात भी इस संदर्भ में संवेदनहीन है।
पॉल


18

जैसा कि यह कहा गया था कि सबसे अच्छा और सबसे सरल तरीके से मैंने पाया था

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}

यह सबसे आसान और सबसे तेज़ समाधान है, हालाँकि यह बड़ी वस्तुओं जैसे कि पर काम नहीं करता है navigator
someguy234

18

बोनस के रूप में रंगों के साथ Node.js के साथ पूरी वस्तु को प्रिंट करने के लिए :

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

रंग निश्चित रूप से वैकल्पिक हैं, 'गहराई: अशक्त' पूरी वस्तु को मुद्रित करेगा।

विकल्प ब्राउज़र में समर्थित नहीं लगते हैं।

संदर्भ:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

https://nodejs.org/api/console.html#console_console_dir_obj_options


16

एनबी: इन उदाहरणों में, आपका ओओबीज उस वस्तु को परिभाषित करता है जिसे आप जांचना चाहते हैं।

पहले किसी वस्तु को प्रदर्शित करने का मेरा सबसे पसंदीदा पसंदीदा तरीका है:

यह एक वस्तु की सामग्री को दिखाने का डिफैक्टो तरीका है

console.log(yourObj)

कुछ इस तरह का उत्पादन होगा: यहां छवि विवरण दर्ज करें

मुझे लगता है कि सबसे अच्छा समाधान ऑब्जेक्ट कुंजी के माध्यम से देखना है, और फिर ऑब्जेक्ट वैल्यू के माध्यम से यदि आप वास्तव में देखना चाहते हैं कि ऑब्जेक्ट क्या है ...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

यह कुछ इस तरह आउटपुट करेगा: यहां छवि विवरण दर्ज करें (ऊपर चित्र: ऑब्जेक्ट में संग्रहीत कुंजी / मान)

यदि आप ECMAScript 2016 या नए का उपयोग कर रहे हैं तो यह नया विकल्प भी है:

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

यह स्वच्छ आउटपुट का उत्पादन करेगा: यहां छवि विवरण दर्ज करें पिछले उत्तर में वर्णित समाधान: console.log(yourObj)बहुत सारे मापदंडों को प्रदर्शित करता है और आपके द्वारा इच्छित डेटा को प्रदर्शित करने के लिए सबसे उपयोगकर्ता के अनुकूल तरीका नहीं है । यही कारण है कि मैं लॉगिंग कीज़ और फिर वैल्यूज़ को अलग-अलग करने की सलाह देता हूँ।

अगला :

console.table(yourObj)

पहले वाली टिप्पणी में किसी ने यह सुझाव दिया था, हालांकि इसने मेरे लिए कभी काम नहीं किया। यदि यह किसी अन्य ब्राउज़र या किसी अन्य चीज़ पर काम करता है, तो यश! बीमार अभी भी यहाँ संदर्भ के लिए कोड डाल दिया! कंसोल के लिए कुछ इस तरह उत्पादन होगा: यहां छवि विवरण दर्ज करें


क्या आप ऑब्जेक्ट और obj को शामिल करने के लिए उदाहरण का विस्तार करेंगे।
हिस्ट्रीस्टैम्प

मुझे यकीन नहीं है कि मैं टिप्पणी को समझता हूं, लेकिन मैंने उन वस्तुओं के लिए अलग-अलग नाम जोड़े हैं जिनका नाम होना चाहिए। वस्तु पर्याप्त स्पष्ट नहीं थी।
मैक्स अलेक्जेंडर हैना

console.table(yourObj) मेरे लिए Google Chrome संस्करण 77.0.3865.90 (आधिकारिक बिल्ड) (64-बिट) पर काम किया। साझा करने के लिए धन्यवाद!
डेवनर

15

(यह GitHub में मेरी लाइब्रेरी में जोड़ा गया है )

यहाँ चाक को फिर से लगाना! इनमें से किसी भी समाधान ने मेरी स्थिति के लिए काम नहीं किया। इसलिए, मैंने जल्दी से विल्सनपेज के उत्तर को सूचित किया । यह एक स्क्रीन प्रिंटिंग (कंसोल, या टेक्स्टफील्ड या जो भी हो) के लिए नहीं है। यह उन स्थितियों में ठीक काम करता है और ठीक उसी तरह काम करता है जैसे कि ओपी ने अनुरोध किया था alert। यहाँ कई उत्तर alertओपी के अनुरोध के अनुसार उपयोग नहीं करते हैं । किसी भी तरह, यह डेटा परिवहन के लिए स्वरूपित है। इस संस्करण के रूप में एक बहुत ही परिणाम वापस करने के लिए लगता है toSource()। मैंने परीक्षण नहीं किया है JSON.stringify, लेकिन मुझे लगता है कि यह उसी चीज के बारे में है। यह संस्करण पॉली-फिल की तरह अधिक है ताकि आप इसे किसी भी वातावरण में उपयोग कर सकें। इस फ़ंक्शन का परिणाम एक मान्य जावास्क्रिप्ट ऑब्जेक्ट घोषणा है।

मुझे संदेह नहीं अगर ऐसा कुछ पहले से ही एसओ पर कहीं था, लेकिन यह पिछले जवाबों को खोजने के दौरान खर्च करने की तुलना में इसे कम करने के लिए छोटा था। और जब से मैंने इस बारे में खोजना शुरू किया, तब से यह सवाल Google पर मेरी सबसे बड़ी हिट थी; मुझे लगा कि इसे यहाँ लगाने से दूसरों को मदद मिल सकती है।

किसी भी तरह, इस फ़ंक्शन से परिणाम आपके ऑब्जेक्ट का एक स्ट्रिंग प्रतिनिधित्व होगा, भले ही आपकी ऑब्जेक्ट में ऑब्जेक्ट्स और सरणियाँ हों, और भले ही उन ऑब्जेक्ट्स या सरणियों में आगे भी एम्बेडेड ऑब्जेक्ट्स और सरणियाँ हों। (मैंने सुना है कि आप पीना पसंद करते हैं? इसलिए, मैंने आपकी कार को एक कूलर के साथ पंप किया। और फिर, मैंने आपके कूलर को एक कूलर के साथ पंप किया। इसलिए, आपका कूलर ठंडा होने पर भी पी सकता है।)

Arrays के []बजाय के साथ संग्रहीत किया जाता है {}और इस प्रकार कुंजी / मूल्य जोड़े, बस मूल्यों नहीं है। नियमित सरणियों की तरह। इसलिए, वे सरणियों की तरह बनाये जाते हैं।

इसके अलावा, सभी स्ट्रिंग (प्रमुख नामों सहित) उद्धृत किए गए हैं, यह तब तक आवश्यक नहीं है जब तक कि उन तारों में विशेष वर्ण (जैसे कि कोई स्थान या स्लैट) न हों। लेकिन, मुझे यह महसूस नहीं हुआ कि मैं केवल कुछ उद्धरणों को हटाने के लिए इसका पता लगाऊंगा जो कि अभी भी ठीक काम करेंगे।

इसके परिणामस्वरूप स्ट्रिंग evalको एक var थ्रू स्ट्रिंग हेरफेर में डंपिंग के साथ या बस इस्तेमाल किया जा सकता है । इस प्रकार, पाठ से अपनी वस्तु को फिर से बनाना।

function ObjToSource(o){
    if (!o) return 'null';
    var k="",na=typeof(o.length)=="undefined"?1:0,str="";
    for(var p in o){
        if (na) k = "'"+p+ "':";
        if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
        else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
        else str += k + o[p] + ",";
    }
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

मुझे बताएं कि क्या मैंने इसे गड़बड़ कर दिया है, मेरे परीक्षण में ठीक काम करता है। इसके अलावा, मैं जिस तरह से पता लगा सकता था उसका एकमात्र तरीका arrayउपस्थिति की जांच करना था length। क्योंकि जावास्क्रिप्ट वास्तव में सरणियों को वस्तुओं के रूप में संग्रहीत करता है, मैं वास्तव में प्रकार के लिए जांच नहीं कर सकता array(ऐसा कोई प्रकार नहीं है!)। अगर कोई और बेहतर तरीका जानता है, तो मुझे यह सुनना अच्छा लगेगा। क्योंकि, यदि आपकी वस्तु में भी एक संपत्ति है, lengthतो यह फ़ंक्शन गलती से इसे एक सरणी के रूप में मान लेगा।

संपादित करें: अशक्त मूल्यवान वस्तुओं के लिए जोड़ा गया चेक। धन्यवाद ब्रॉक एडम्स

संपादित करें: नीचे निश्चित फ़ंक्शन है जो असीम रूप से पुनरावर्ती वस्तुओं को मुद्रित करने में सक्षम है। यह toSourceएफएफ से एक ही प्रिंट नहीं करता है क्योंकि toSourceअनंत पुनरावृत्ति को एक बार प्रिंट करेगा, जहां, यह फ़ंक्शन इसे तुरंत मार देगा। यह फ़ंक्शन ऊपर वाले की तुलना में धीमी गति से चलता है, इसलिए मैं उपरोक्त फ़ंक्शन को संपादित करने के बजाय इसे यहां जोड़ रहा हूं, क्योंकि इसकी केवल आवश्यकता है यदि आप उन वस्तुओं को पास करने की योजना बनाते हैं जो कहीं न कहीं खुद को वापस लिंक करते हैं।

const ObjToSource=(o)=> {
    if (!o) return null;
    let str="",na=0,k,p;
    if (typeof(o) == "object") {
        if (!ObjToSource.check) ObjToSource.check = new Array();
        for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
        ObjToSource.check.push(o);
    }
    k="",na=typeof(o.length)=="undefined"?1:0;
    for(p in o){
        if (na) k = "'"+p+"':";
        if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
        else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
        else str += k+o[p]+",";
    }
    if (typeof(o) == "object") ObjToSource.check.pop();
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

परीक्षा:

var test1 = new Object();
test1.foo = 1;
test1.bar = 2;

var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;

console.log(ObjToSource(testobject));
console.log(testobject.toSource());

परिणाम:

{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})

नोट: प्रिंट करने की कोशिश document.bodyएक भयानक उदाहरण है। एक के लिए, FF उपयोग करते समय एक खाली ऑब्जेक्ट स्ट्रिंग प्रिंट करता है toSource। और ऊपर फ़ंक्शन का उपयोग करते समय, एफएफ क्रैश हो जाता है SecurityError: The operation is insecure.। और Chrome क्रैश हो जाएगा Uncaught RangeError: Maximum call stack size exceeded। स्पष्ट रूप से, document.bodyस्ट्रिंग में परिवर्तित होने के लिए नहीं था। क्योंकि इसकी या तो बहुत बड़ी है, या कुछ संपत्तियों तक पहुंचने के लिए सुरक्षा नीति के खिलाफ है। जब तक, मैं यहाँ कुछ गड़बड़ कर दिया, बताओ!


क्रैश प्रोन। ObjToSource(document.body)उदाहरण के लिए कोशिश करें ।
ब्रॉक एडम्स

ठीक है, मुझे मुद्दा मिल गया। मैं अशक्त मूल्यवान वस्तुओं के लिए जाँच नहीं कर रहा था। जो अब तय हो गया है। लेकिन, आप अभी भी ObjToSource(document.body)अनंत पुनरावृत्ति के कारण नहीं कर सकते । यहां तक ​​कि document.body.toSource()फ़ायर्फ़ॉक्स में एक खाली वस्तु देता है।
पिंप ट्राइज़किट

@BrockAdams - अब अनंत पुनरावृत्ति के लिए तय किया गया है, हालांकि document.bodyअभी भी मुद्रण योग्य नहीं है। नोट देखें।
पिंप ट्राइजकिट

document.bodyकुछ बड़ी समस्याओं को इंगित करने के लिए सिर्फ एक शॉर्टकट था। अब आप उनमें से सबसे खराब तय कर चुके हैं और मैं पहले से ही अपडाउन कर चुका हूं। (हालांकि, मुझे विश्वास है कि एक अलग दृष्टिकोण को संभाल सकता है document.body। यहां अधिकांश उत्तर या तो इसके खिलाफ अच्छा नहीं करेंगे।)
ब्रॉक एडम्स

ठीक है, अगर आपको (या किसी और को) इस बात का कोई अंदाजा हो गया कि इस तथ्य से कैसे छुटकारा पाया जाए कि इतनी बड़ी वस्तु पुनरावर्तन या सुरक्षा प्रतिबंधों के दौरान ढेर को भर देगी। मैं इसे सुनना पसंद करूंगा। वोट के लिए धन्यवाद!
पिंप ट्राइज़किट

14

यदि आप इसकी पूरी लंबाई की वस्तु को प्रिंट करना चाहते हैं, तो उपयोग कर सकते हैं

कंसोल.लॉग (आवश्यकता ('उपयोग')। निरीक्षण करें (obj, {showHidden: गलत, गहराई: null})

यदि आप ऑब्जेक्ट को स्ट्रिंग में परिवर्तित करके प्रिंट करना चाहते हैं

console.log (JSON.stringify (obj));


JSON.stringifyजब आप एक स्ट्रिंग ऑब्जेक्ट के साथ समतल करने की कोशिश करते हैं, तो आपको जोड़ना होगा। यदि आप उपयोग करते हैं console.log(object), तो उसे वस्तु की सामग्री को बहुत प्रिंट करना चाहिए
Satadru Biswas

12

यहाँ यह करने का एक तरीका है:

console.log("%o", obj);

दिलचस्प। क्या इस पर कोई और जानकारी है?
ल्यूक

क्रोम-डे-टूल के संदर्भ में, Google ने इस लिंक में इसका उल्लेख किया है । "स्ट्रिंग प्रतिस्थापन और स्वरूपण" अनुभाग का उल्लेख करते हुए
चाको

मैंने इसे mdn डॉक्स में देखा ।
एंटोन हरनिएक

2
तो जवाब में, यह वही है जो मैं देख रहा था।
शुभम कुशवाह

11

मुझे ऑब्जेक्ट को पुन: मुद्रित करने के लिए एक तरीके की आवश्यकता थी, जो पेजविल के उत्तर प्रदान किया गया (धन्यवाद!)। मैंने इसे एक निश्चित स्तर तक प्रिंट करने का एक तरीका शामिल करने के लिए, और रिक्ति जोड़ने के लिए इसे थोड़ा अद्यतन किया ताकि यह वर्तमान स्तर के आधार पर ठीक से इंडेंट हो जाए कि हम इसमें अधिक पठनीय हैं।

// Recursive print of object
var print = function( o, maxLevel, level ) {
    if ( typeof level == "undefined" ) {
        level = 0;
    }
    if ( typeof level == "undefined" ) {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 ) {
        str = '<pre>';
    }

    var levelStr = '';
    for ( var x = 0; x < level; x++ ) {
        levelStr += '    ';
    }

    if ( maxLevel != 0 && level >= maxLevel ) {
        str += levelStr + '...</br>';
        return str;
    }

    for ( var p in o ) {
        if ( typeof o[p] == 'string' ) {
            str += levelStr +
                p + ': ' + o[p] + ' </br>';
        } else {
            str += levelStr +
                p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 ) {
        str += '</pre>';
    }
    return str;
};

उपयोग:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

// Recursive of whole object
$('body').append( print(pagewilsObject) ); 

// Recursive of myObject up to 1 level, will only show name 
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) ); 

काम की जरूरत है। लापता अल्पविराम, उद्धरण, आदि हैं
posfan12

6

मैं हमेशा उपयोग करता हूं console.log("object will be: ", obj, obj1)। इस तरह से मुझे JSON के साथ स्ट्रिंग के साथ वर्कअराउंड करने की आवश्यकता नहीं है। ऑब्जेक्ट के सभी गुणों को अच्छी तरह से विस्तारित किया जाएगा।


6

कंसोल के भीतर वस्तुओं को प्रदर्शित करने का एक और तरीका है JSON.stringify। नीचे दिए गए उदाहरण की जाँच करें:

var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));

5

जावास्क्रिप्ट समारोह

<script type="text/javascript">
    function print_r(theObj){ 
       if(theObj.constructor == Array || theObj.constructor == Object){ 
          document.write("<ul>") 
          for(var p in theObj){ 
             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 
                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 
                document.write("<ul>") 
                print_r(theObj[p]); 
                document.write("</ul>") 
             } else { 
                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 
             } 
          } 
          document.write("</ul>") 
       } 
    } 
</script>

मुद्रण वस्तु

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

जावास्क्रिप्ट में Print_r के माध्यम से


मुझे यकीन नहीं है कि यह js.do उदाहरण में एक बग है जो मैं उपयोग कर रहा हूं, लेकिन यह केवल पेड़ की पहली पूर्ण "शाखा" का उत्पादन करता है। यानी यह पहले संदर्भ के पहले संदर्भ का अनुसरण करता है ... विज्ञापन इन्फिनिटम
जॉन स्टोरी

5
var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

objectआपकी वस्तु कहाँ है

या आप इसे क्रोम देव टूल्स में उपयोग कर सकते हैं, "कंसोल" टैब:

console.log(object);


मुझे लगता है कि आपका जवाब अधूरा है। (मुझे नीचा दिखाने का कारण नहीं है) यह, अभी तक, केवल कुंजी को प्रिंट करें ..
अब्दिला

1
आपके उत्तर के लिए धन्यवाद, इसने मुझे ऐसा करने के लिए प्रेरित किया है: console.log(Object.keys(object));जबकि मुझे पता है कि केवल गुण कुंजी छापता है, यह मेरे उद्देश्यों के लिए मेरे लिए पर्याप्त है;)
विल्सन

5

वस्तु मान लेना obj = {0:'John', 1:'Foo', 2:'Bar'}

ऑब्जेक्ट का प्रिंट करें

for (var i in obj){
    console.log(obj[i], i);
}

कंसोल आउटपुट (Chrome DevTools):

John 0
Foo 1
Bar 2

उम्मीद है की वो मदद करदे!


4

मैं console.tableस्पष्ट ऑब्जेक्ट प्रारूप प्राप्त करने के लिए उपयोग करना पसंद करता हूं , इसलिए कल्पना करें कि आपके पास यह ऑब्जेक्ट है:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

और आप नीचे इस तरह एक साफ और पठनीय तालिका देखेंगे: कंसोल मेज


3

थोड़ा हेल्पर फ़ंक्शन मैं हमेशा कंसोल के माध्यम से सरल, तेज डिबगिंग के लिए अपनी परियोजनाओं में उपयोग करता हूं। लारवेल से ली गई प्रेरणा।

/**
 * @param variable mixed  The var to log to the console
 * @param varName string  Optional, will appear as a label before the var
 */
function dd(variable, varName) {
    var varNameOutput;

    varName = varName || '';
    varNameOutput = varName ? varName + ':' : '';

    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}

प्रयोग

dd(123.55); आउटपुट:
यहां छवि विवरण दर्ज करें

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

यहां छवि विवरण दर्ज करें


3

आप स्ट्रिंग प्रारूप में जावास्क्रिप्ट ऑब्जेक्ट की सामग्री को प्रदर्शित करने के लिए ES6 टेम्पलेट शाब्दिक अवधारणा का भी उपयोग कर सकते हैं।

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);


2

मैंने पेजविल के प्रिंट विधि का उपयोग किया, और इसने बहुत अच्छी तरह से काम किया।

यहां मेरा थोड़ा विस्तारित संस्करण (मैला) इंडेंट और अलग-अलग प्रोप / ओब सीमांकक के साथ है:

var print = function(obj, delp, delo, ind){
    delp = delp!=null ? delp : "\t"; // property delimeter
    delo = delo!=null ? delo : "\n"; // object delimeter
    ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
    var str='';

    for(var prop in obj){
        if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
          var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
          str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
        }else{
          str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
        }
    }
    return str;
};

यह बहुत ही टेढ़ा है।
posfan12

2

पेजविल्स कोड का एक और संशोधन ... उसका तार के अलावा कुछ भी प्रिंट नहीं होता है और संख्या और बूलियन फ़ील्ड को खाली छोड़ देता है और मैंने मेगाबॉस द्वारा बनाए गए फ़ंक्शन के अंदर दूसरे टाइपोफ़ पर टाइपो को ठीक किया।

var print = function( o, maxLevel, level )
{
    if ( typeof level == "undefined" )
    {
        level = 0;
    }
    if ( typeof maxlevel == "undefined" )
    {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 )
    {
        str = '<pre>';   // can also be <pre>
    }

    var levelStr = '<br>';
    for ( var x = 0; x < level; x++ )
    {
        levelStr += '    ';   // all those spaces only work with <pre>
    }

    if ( maxLevel != 0 && level >= maxLevel )
    {
        str += levelStr + '...<br>';
        return str;
    }

    for ( var p in o )
    {
        switch(typeof o[p])
        {
          case 'string':
          case 'number':    // .tostring() gets automatically applied
          case 'boolean':   // ditto
            str += levelStr + p + ': ' + o[p] + ' <br>';
            break;

          case 'object':    // this is where we become recursive
          default:
            str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
            break;
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 )
    {
        str += '</pre>';   // also can be </pre>
    }
    return str;
};

2

यहाँ फ़ंक्शन है।

function printObj(obj) {
console.log((function traverse(tab, obj) {
    let str = "";
    if(typeof obj !== 'object') {
        return obj + ',';
    }
    if(Array.isArray(obj)) {            
        return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
    }
    str = str + '{\n';
    for(var p in obj) {
        str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
    }
    str = str.slice(0,-2) + str.slice(-1);                
    str = str + tab + '},';
    return str;
}('',obj).slice(0,-1)))};

यह पठनीयता के साथ टैब इंडेंट का उपयोग करके ऑब्जेक्ट दिखा सकता है।


अपने ब्राउज़र को क्रैश करने के लिए निश्चित शॉट: पी
सतद्रु बिस्वास
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.