আমি কীভাবে একটি জাভাস্ক্রিপ্ট অবজেক্ট প্রদর্শন করতে পারি?


1615

আমরা যখন alertকোনও ভেরিয়েবলের মতো একটি স্ট্রিং ফর্ম্যাটে জাভাস্ক্রিপ্ট অবজেক্টের সামগ্রীটি প্রদর্শন করব ?

একই ধরণের ফর্ম্যাট করা উপায়ে আমি কোনও অবজেক্টটি প্রদর্শন করতে চাই।


7
আপনি কি দয়া করে আপনার প্রশ্নের উত্তর দিতে চান? "ফর্ম্যাটেড ওয়ে" বলতে কী বোঝ? যেমন সমৃদ্ধ ফর্ম্যাটিং সহ, সাহসী / তির্যক / ইত্যাদি?
সাশা চেদিগোভ

কিছু কনসোল কমান্ড ব্যবহার করে ভেরিয়েবলের মান মুদ্রণ করে কোনও ভেরিয়েবলের রানটাইম মান প্রদর্শন করার উপায় আছে কি?
ব্ল্যাকপ্যাথার

1
@BlackPanther শুধু কি console.log("", yourObject1, yourObject2, yourObject3, etc...);। একটি সংক্ষিপ্ত সংস্করণ কেবল করণীয় console.log(yourObject1, yourObject2, etc...);
tom_mai78101

2
আপনি দয়া করে আরও ভাল উত্তর চয়ন করতে পারেন যা আরও সঠিকভাবে সম্প্রদায়ের sensকমত্যকে প্রতিফলিত করে?
হোল্ডঅফহাঙ্গার

এটি পছন্দ করুনconsole.log('a string', aNumber, anObject)
onwayway133

উত্তর:


1068

আপনি যদি ডিবাগিংয়ের উদ্দেশ্যে অবজেক্টটি মুদ্রণ করতে চান তবে কোডটি ব্যবহার করুন:

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

প্রদর্শিত হবে:

স্ক্রিনশট কনসোল ক্রোম

নোট: আপনাকে অবশ্যই শুধুমাত্র বস্তুর লগ ইন করুন। উদাহরণস্বরূপ, এটি কাজ করবে না:

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

দ্রষ্টব্য :: আপনি logপদ্ধতিতে কমা ব্যবহার করতে পারেন , তারপরে আউটপুটটির প্রথম লাইনটি স্ট্রিং হবে এবং তার পরে অবজেক্টটি রেন্ডার হবে:

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

43
জাভাস্ক্রিপ্ট কনসোল ব্যবহার করার সময় এই ক্রিয়াটি গুগল ক্রোমেও কাজ করে (ক্রোম সংস্করণের উপর নির্ভর করে শিফট + নিয়ন্ত্রণ + জে বা শিফট + কন্ট্রোল + আই) I এছাড়াও নোট করুন যে console.log(obj1, obj2)খুব সুন্দরভাবে কাজ করে, তাই console.log()একাধিক ভেরিয়েবল লগ করার সময় আপনাকে প্রতিটি বস্তুর জন্য কল করতে হবে না । এছাড়াও, উত্পাদনের ক্ষেত্রে এই জাতীয় সমস্ত কলগুলি সরাতে সর্বদা মনে রাখবেন, কারণ এটি ব্রাউজারগুলিকে ভেঙে দেবে যা এটি প্রয়োগ করে না (যেমন ইন্টারনেট এক্সপ্লোরার)।
ফেলিক্স

102
হ্যাঁ এটি [অবজেক্ট অবজেক্ট] মুদ্রণ করে তবে এর পাশে এটির সামান্য প্রসারিত-টগলি বোতাম রয়েছে যা আপনাকে অবজেক্টের সামগ্রীগুলি পরীক্ষা করতে দেয়।
হিউজেস

12
@ হিগস এটি উভয়ই করতে পারে। আমার সাথে তৈরি একটি বস্তু রয়েছে: var obj = obj "foo": মিথ্যা false; এবং অন্য একটি বস্তু যা একটি সার্ভার থেকে কলব্যাকে প্রেরণ করা হচ্ছে, একটি কলব্যাক প্রিন্টগুলির মাধ্যমে অল্প তীরের সাথে প্রেরণ করেছে যাতে আপনি এটি খুলতে পারেন, স্থিরভাবে তৈরি করা কেবলমাত্র কোনও তীর ছাড়াই [অবজেক্ট অবজেক্ট] প্রিন্ট করে। আমি এটিকেও বোঝার চেষ্টা করছি, অন্য কোনও চিন্তাভাবনা?
বেনস্ট্রভ

124
console.log("id:"+obj);আপনি যখনই এটি দেখছেন console.log("id:"); console.log(obj);
তখনই

13
চেষ্টা করুন 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 replacer ব্যবহার করুন

"Uncaught TypeError: Converting circular structure to JSON"

326
আরও পঠনযোগ্য আউটপুটের জন্য JSON.stringify চেষ্টা করুন (اعتراض, নাল, 4)। এটি এটিকে ঝরঝরে ইন্ডেন্টেড লেখা হিসাবে লিখব
বেন ক্লেটন

2
JSON.stringify কেবল জাভাস্ক্রিপ্ট মানগুলির একটি ছোট উপসেট প্রদর্শন করতে পারে এবং বাকিদের জন্য একটি ব্যতিক্রম ছুঁড়ে ফেলবে - কনসোল.লগের এই সমস্যা নেই।
মনিকা মনে রাখবেন

11
আপনি যদি আমার মত একটি নবাগত হন, ভুলবেন না console.logঅর্থাতconsole.log(JSON.stringify(obj,null, 4));
নিলেশ

2
"আনকাচড প্রকারভেদ: ওপ = উইন্ডোতে যখন বিজ্ঞপ্তি কাঠামোটি জেএসএনে রূপান্তর করা হচ্ছে"।
মাইকেল 23

1
আমার এমন কেস হয়েছে যেখানে এটি কাজ করে না: এটি {}একটি খালি অবজেক্টের জন্য দেখানো হয়েছিল। সুতরাং ফিরে আসার console.log(obj)সময় আপনার অবজেক্টটি খালি থাকার কথা চিন্তা করার আগে নিশ্চিত হয়ে নিন । strigify(){}
সিন্ডারাস

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

1
ঠিক এটাই আমি চাই। আমি গুগল ম্যাপস ভি 3 ব্যবহার করছি এবং ডাইরেক্টরেন্ডার একটি বস্তুকে রিটার্ন দেয়। এর চারটি আইটেম রয়েছে এবং সেই একটিতে একটি অবজেক্টের নাম পরিবর্তন হয় তাই আমাদের এটি সন্ধান করা উচিত। তার জন্য এই পদ্ধতিটি সত্যই সহায়তা করেছিল। এই উপায় ছাড়াও আমরা বৈশিষ্ট্য এবং বস্তুর সমস্ত নাম পেতে পারি। বা বস্তু এবং বৈশিষ্ট্যগুলির নামগুলি খুঁজে পাওয়ার জন্য অন্য কোনও উপায় আছে?
জয়পাল চন্দ্রন

34
+1, সমস্ত জাভাস্ক্রিপ্ট ব্রাউজারে চালিত হয় না বা সেগুলিতে ডিবাগ করা যায়।
বিল ইয়াং

3
আপনি সম্ভবত বেশিরভাগ সময়ই হ্যানঅনপ্রোপার্টি সহ বিল্ট ইন ক্রাউটটি মাস্ক করতে চান।
জন

9
ওমগ - 0: [; 1: ও; 2: খ; 3: জে; 4: ই; 5: গ; 6: টি; 7:; 8: ও; 9: খ; 10: জে; 11: ই; 12: সি; 13: টি; 14:];
জেসিরিস

1
এটি খুঁজে পেতে একটু দেরি হয়ে গেছে, তবে গত বছরের (২৯ শে আগস্ট) আমার জন্মদিনে অনুরোধ করা হওয়ায় এখানে একটি কার্যকরী মাপসই রয়েছে। jsfiddle.net/MrMarlow/fq53o6o9
মিস্টার মার্লো

124

console.dir(object):

নির্দিষ্ট জাভাস্ক্রিপ্ট অবজেক্টের বৈশিষ্ট্যের একটি ইন্টারেক্টিভ তালিকা প্রদর্শন করে। এই তালিকাটি আপনাকে শিশু সামগ্রীর সামগ্রীগুলি পরীক্ষা করতে প্রকাশ ত্রিভুজগুলি ব্যবহার করতে দেয়।

নোট করুন যে console.dir()বৈশিষ্ট্যটি মানহীন। দেখুন MDN ওয়েব ডক্স


1
হ্যাঁ এটি একটি ভাল সমাধান, তবে আপনি কেবলমাত্র অবজেক্টে লগ করতে চাইলে এটি কেবল প্রকাশিত হিসাবে কাজ করে (যেমন কনসোল.ডির (আপত্তি))। যদি আপনি আউটপুটে স্টিংকে সংযুক্ত করতে চান তবে এটি আপনাকে [অবজেক্ট অবজেক্ট] দেবে।
জোমন

এর বিশাল সুবিধা console.dirহ'ল ভেরিয়েবলটি আবর্জনা সংগ্রহের পরেও আপনি আপনার কনসোলের মানগুলি প্রসারিত করতে এবং পড়তে পারেন। এটি এখানে
ডাউসন বি

এবং এর আরও একটি সুবিধা 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

ঠিক আছে, ফায়ারফক্স (বিশদ তথ্যের জন্য @ বোজ্যাংলসকে ধন্যবাদ) এমন Object.toSource()পদ্ধতি রয়েছে যা জেএসএন এবং হিসাবে বস্তুগুলি মুদ্রণ করে function(){}

আমার ধারণা, এটি বেশিরভাগ ডিবাগিংয়ের জন্যই যথেষ্ট।


6
অবজেক্ট.টোসোর্স () Chrome এর জন্য কাজ করছে বলে মনে হচ্ছে না, এটি কি প্রত্যাশিত? বা Chrome কি "উন্নত ব্রাউজারগুলি" এর আওতায় পড়ে না? =)
স্টাইল স্টাইল

44
পুরানো থ্রেড, সবেমাত্র এটি গুগলের মাধ্যমে খুঁজে পেয়েছে। .toSource()আসলে ফায়ারফক্স হয় শুধুমাত্র । ভেবেছিলাম আমি আপনাকে জানাতে চাই।
বোজ্যাংলেস

52

আপনি যদি নিজের অবজেক্টটি মুদ্রণের জন্য সতর্কতা ব্যবহার করতে চান তবে আপনি এটি করতে পারেন:

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

এটি স্ট্রিং ফর্ম্যাটে প্রতিটি সম্পত্তি এবং তার সম্পর্কিত মান মুদ্রণ করা উচিত।


18
টোসোর্স () নন-গেকো ব্রাউজারগুলিতে (যেমন ক্রোম, সাফারি) কাজ করে না
ইয়ারিন

37

আপনি যদি টেবুলার বিন্যাসে ডেটা দেখতে চান তবে আপনি ব্যবহার করতে পারেন

console.table(obj);

আপনি টেবিল কলামে ক্লিক করলে সারণি সাজানো যেতে পারে।

আপনি কী কলামগুলি দেখানোর জন্য তা নির্বাচন করতে পারেন:

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

কনসোল.ট্যাবল সম্পর্কে আরও তথ্য আপনি এখানে পাবেন


34

নোডজেএসে আপনি ব্যবহার করে কোনও বিষয় মুদ্রণ করতে পারেন util.inspect(obj)। গভীরতাটি নিশ্চিত করতে ভুলবেন না আপনার কাছে কেবলমাত্র অবজেক্টের অগভীর মুদ্রণ থাকবে have


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
@ উইলসনপৃষ্ঠাটি যদি আমি টেলিফোনে সম্পত্তির পূর্ণসংখ্যার মান যুক্ত করি তবে এটি ব্যর্থ হচ্ছে :(
এনআই 3

24

সহজভাবে ব্যবহার

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)" ইতিমধ্যে "27 নভেম্বর 2010" তে উল্লেখ করা হয়েছে, আপনি কেবল নকল এবং উত্তর ছাড়াই এই প্রশ্নটিকে বিশৃঙ্খলা করছেন। নতুন বৈশিষ্ট্য নির্ধারণের বিষয়ে আপনার বক্তব্যও এই প্রসঙ্গে বোকামি।
পল


18

যেমনটি আগে বলা হয়েছিল সবচেয়ে ভাল এবং সবচেয়ে সহজ উপায় আমি খুঁজে পেয়েছি

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

এটি সবচেয়ে সহজ এবং দ্রুত সমাধান, তবে এটি বড় আইটেমগুলিতে যেমন কাজ করে না navigator
someguy234

18

নোড.জেএস সহ সম্পূর্ণ বস্তুটি বোনাস হিসাবে রঙের সাথে মুদ্রণ করতে :

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

রঙ অবশ্যই alচ্ছিক, 'গভীরতা: নাল' সম্পূর্ণ বস্তুটি মুদ্রণ করবে।

বিকল্পগুলি ব্রাউজারগুলিতে সমর্থিত বলে মনে হচ্ছে না।

তথ্যসূত্র:

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

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


15

নোট: এই উদাহরণগুলিতে, আপনার ওবিজে আপনি যে বিষয়টিকে পরীক্ষা করতে চান তা সংজ্ঞায়িত করে।

প্রথমে আমার সর্বনিম্ন প্রিয় তবে কোনও অবজেক্ট প্রদর্শন করার সবচেয়ে সর্বাধিক ব্যবহৃত উপায়ে:

এটি কোনও অবজেক্টের বিষয়বস্তু দেখানোর ডিফাক্টো উপায়

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)

আগের মন্তব্যে কেউ এটিকে পরামর্শ দিয়েছেন, তবে এটি কখনই আমার পক্ষে কার্যকর হয়নি। এটি যদি অন্য কোনও ব্রাউজারে বা অন্য কোনও ব্যক্তির পক্ষে কাজ করে তবে কুডোস! রেফারেন্সের জন্য আমি এখানে কোডটি রেখেছি! কনসোলে এই জাতীয় কিছু আউটপুট দেবে: এখানে চিত্র বর্ণনা লিখুন


আপনি অবজেক্ট এবং আপত্তি অন্তর্ভুক্ত করতে উদাহরণটি প্রসারিত করবেন।
হিস্ট্রিস্ট্যাম্প

আমি মন্তব্যটি বুঝতে পেরেছি তা নিশ্চিত নই, তবে আমি যে বস্তুর একটি নাম থাকতে হবে তার জন্য পৃথক পৃথক নাম যুক্ত করেছি। অবজেক্ট যথেষ্ট স্পষ্ট ছিল না।
ম্যাক্সেন্ড আলেকজান্ডার হানা

console.table(yourObj) গুগল ক্রোম সংস্করণ 77.0.3865.90 (অফিসিয়াল বিল্ড) (-৪-বিট) এ আমার জন্য কাজ করেছে। ভাগ করে নেওয়ার জন্য ধন্যবাদ!
ডেভনার

15

(এটি গিটহাবের আমার লাইব্রেরিতে যুক্ত করা হয়েছে )

এখানে চাকা পুনর্নবীকরণ! এই সমাধানগুলির কোনওটিই আমার পরিস্থিতির পক্ষে কাজ করেনি। সুতরাং, আমি দ্রুত উইলসনপেজের উত্তর ডক্টর করেছি । এটি স্ক্রিনে মুদ্রণের জন্য নয় (কনসোল, বা টেক্সটফিল্ড বা যেকোনো কিছু দিয়ে)। এটি সেই পরিস্থিতিতে ঠিকঠাক কাজ করে এবং ওপি যেমন অনুরোধ করেছিল ঠিক তেমন কাজ করে alertalertওপির অনুরোধ হিসাবে অনেক উত্তর এখানে সম্বোধন করে না । যাইহোক, এটি তথ্য পরিবহনের জন্য ফর্ম্যাট করা আছে। এই সংস্করণটি খুব অনুরূপ ফলাফল হিসাবে ফিরে আসবে বলে মনে হচ্ছে toSource()। আমি এর বিরুদ্ধে পরীক্ষা JSON.stringifyকরিনি, তবে আমি ধরে নিই এটি একই জিনিস সম্পর্কে। এই সংস্করণটি একটি পলি-ফিলের মতো যাতে আপনি এটি কোনও পরিবেশে ব্যবহার করতে পারেন। এই ফাংশনের ফলাফলটি একটি বৈধ জাভাস্ক্রিপ্ট অবজেক্ট ঘোষণা।

এরকম কিছু ইতিমধ্যে কোথাও কোথাও ছিল কিনা তা নিয়ে আমি সন্দেহ করব না, তবে পূর্ববর্তী উত্তরগুলি অনুসন্ধান করার জন্য কিছুটা ব্যয় করার চেয়ে এটি তৈরি করা কেবল ছোট ছিল। এবং যেহেতু এই প্রশ্নটি গুগলে আমার শীর্ষে ছিল যখন আমি এই সম্পর্কে অনুসন্ধান শুরু করেছি; আমি অনুভব করেছি এটি এখানে রেখে অন্যকে সাহায্য করতে পারে।

যাইহোক, এই ফাংশনটি থেকে প্রাপ্ত ফলাফলটি আপনার অবজেক্টের একটি স্ট্রিং প্রতিনিধিত্ব করবে, এমনকি যদি আপনার অবজেক্টে বস্তু এবং অ্যারে এম্বেড থাকে এবং এমনকি যদি সেগুলি বা অ্যারেগুলিতে আরও এম্বেড করা অবজেক্ট এবং অ্যারে থাকে। (আমি শুনেছি যে আপনি পান করতে চান? সুতরাং, আমি আপনার গাড়িটি একটি কুলার দিয়ে ফুটিয়েছি And এবং তারপরে, আমি আপনার শীতলটি একটি শীতল দিয়ে ফুটিয়েছি So সুতরাং, আপনার শীতল পান করতে পারে, আপনার শীতল হওয়ার সময়))

অ্যারেগুলির []পরিবর্তে সংরক্ষণ করা হয় {}এবং এর ফলে কী / মান জোড়া থাকে না, কেবল মান থাকে। নিয়মিত অ্যারেগুলির মতো। অতএব, তারা অ্যারের মতো তৈরি হয়।

এছাড়াও, সমস্ত স্ট্রিং (মূল নামগুলি সহ) উদ্ধৃত করা হয়েছে, যদি না এই স্ট্রিংগুলির বিশেষ অক্ষর (স্পেস বা স্ল্যাশের মতো) না থাকে তবে এটি প্রয়োজনীয় নয়। তবে, আমি এমন কিছু উদ্ধৃতি সরিয়ে ফেলতে এটি সনাক্ত করার মতো মনে করি নি যা অন্যথায় এখনও ভাল কাজ করবে।

এই ফলস্বরূপ স্ট্রিংটি তারপরে evalস্ট্রিং ম্যানিপুলেশনের মাধ্যমে কোনও ভারে ডাম্প করে বা ব্যবহার করা যেতে পারে । সুতরাং, পাঠ্য থেকে আপনার বস্তুটি আবার তৈরি করুন

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একটি ভয়ানক উদাহরণ। একটির জন্য, এফএফ ব্যবহার করার সময় কেবল একটি খালি অবজেক্ট স্ট্রিং প্রিন্ট করে toSource। এবং উপরের ফাংশনটি ব্যবহার করার সময়, এফএফ ক্র্যাশ হয়ে যায় SecurityError: The operation is insecure.। এবং ক্রোম ক্রাশ হবে Uncaught RangeError: Maximum call stack size exceeded। স্পষ্টতই, document.bodyস্ট্রিংতে রূপান্তরিত করার অর্থ ছিল না। কারণ এটি হয় খুব বড়, বা নির্দিষ্ট সম্পত্তি অ্যাক্সেস করার জন্য সুরক্ষা নীতির বিরুদ্ধে। যদি না, আমি এখানে কিছু গণ্ডগোল করেছি, বলুন!


ক্রাশ প্রবণ। ObjToSource(document.body)উদাহরণস্বরূপ চেষ্টা করুন ।
ব্রুক অ্যাডামস

ঠিক আছে, আমি সমস্যাটি খুঁজে পেয়েছি। আমি নাল মূল্যবান জিনিসগুলির জন্য যাচাই করছিলাম না। এটা এখন স্থির। তবে, আপনি এখনও ObjToSource(document.body)অসীম পুনরাবৃত্তির কারণে করতে পারবেন না । এমনকি document.body.toSource()ফায়ারফক্সেও একটি শূন্য বস্তু ফিরে আসে।
পিম্প ট্রাইজকিট

@ ব্রোকএডামস - এখন এটি অসীম পুনরাবৃত্তির জন্য স্থির হয়েছে, তবে document.bodyএখনও মুদ্রণযোগ্য নয়। নোট দেখা.
পিম্প ট্রাইস্কিট

document.bodyকিছু বড় সমস্যা চিহ্নিত করার জন্য একটি শর্টকাট ছিল। আপনি এখন সেগুলির মধ্যে সবচেয়ে খারাপটি স্থির করেছেন এবং আমি ইতিমধ্যে উত্সাহিত করেছি। (যদিও, আমি বিশ্বাস করি যে একটি ভিন্ন পদ্ধতি হ্যান্ডেল করতে পারে document.bodyhere এখানে বেশিরভাগ উত্তরও এর বিরুদ্ধে ভাল করতে পারে না))
ব্রুক অ্যাডামস

ঠিক আছে, যদি আপনি (বা অন্য কেউ) কীভাবে এই ধারণাটি পেয়ে যান যে এত বড় একটি বস্তু পুনরাবৃত্তি বা সুরক্ষা নিষেধাজ্ঞাগুলি বাইপাস করার সময় এই স্ট্যাকটি পূরণ করবে এই ধারণাটি কীভাবে পাওয়া যায়। আমি এটা শুনতে চাই। ভোটের জন্য ধন্যবাদ!
পিম্প ট্রাইজকিট

14

আপনি যদি তার পূর্ণ দৈর্ঘ্যের অবজেক্টটি মুদ্রণ করতে চান তবে ব্যবহার করতে পারেন

কনসোল.লগ (প্রয়োজনীয় ('ইউজার')। পরীক্ষা করা (আপত্তি, {শোহীন: মিথ্যা, গভীরতা: নাল})

আপনি যদি স্ট্রিংতে রূপান্তর করে অবজেক্টটি মুদ্রণ করতে চান

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


আপনি JSON.stringifyযখন একটি স্ট্রিং অবজেক্টের সাথে মিলিত করার চেষ্টা করবেন তখন আপনাকে যুক্ত করতে হবে । আপনি যদি ব্যবহার করেন console.log(object)তবে এটি অবজেক্টের সামগ্রীগুলি প্রিন্ট করা উচিত
সাতাদ্রু বিশ্বাস

12

এটি করার একটি উপায় এখানে:

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

মজাদার. এই সম্পর্কে আরও কোন তথ্য আছে?
লুক

ক্রোম-ডেভ-টুল প্রসঙ্গে, গুগল এই লিঙ্কটিতে এটি উল্লেখ করেছে । "স্ট্রিং প্রতিস্থাপন এবং বিন্যাসকরণ" বিভাগটি উল্লেখ করে
চকো


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) ); 

কাজ দরকার. অনুপস্থিত কমা, উদ্ধৃতি ইত্যাদি রয়েছে
21:48

6

আমি সবসময় ব্যবহার করি console.log("object will be: ", obj, obj1)। এইভাবে জেএসএনের সাথে স্ট্রিংফাই করে কাজটি করার দরকার নেই। অবজেক্টের সমস্ত বৈশিষ্ট্য সুন্দরভাবে প্রসারিত হবে।


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> 

জাভাস্ক্রিপ্টে মুদ্রণ_আর মাধ্যমে


আমি নিশ্চিত নই যে এটি 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));যদিও আমি জানি যে কেবলমাত্র সম্পত্তিগুলির কীগুলি মুদ্রণ করা হয়, এটি আমার উদ্দেশ্যে যথেষ্ট me)
উইলসন

5

ধারণা করা অবজেক্ট obj = {0:'John', 1:'Foo', 2:'Bar'}

বস্তুর সামগ্রী মুদ্রণ করুন

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

কনসোল আউটপুট (ক্রোম দেবটুলস):

John 0
Foo 1
Bar 2

আশা করি এইটি কাজ করবে!


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

আমি console.tableস্পষ্ট অবজেক্ট ফর্ম্যাট পেতে ব্যবহার করতে পছন্দ করি , সুতরাং আপনার এই অবজেক্টটি কল্পনা করুন:

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

এবং আপনি নীচের মত একটি ঝরঝরে এবং পঠনযোগ্য টেবিল দেখতে পাবেন: console.table


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;
};

এটা খুব opালু।
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)))};

এটি পঠনযোগ্যতার সাথে ট্যাব ইন্ডেন্ট ব্যবহার করে অবজেক্টটি প্রদর্শন করতে পারে।


আপনার ব্রাউজারটি বিধ্বস্ত করার জন্য অবশ্যই শট দেওয়া হয়েছে: পি
সাতাদ্রু বিশ্বাস

2

আপনি একটি স্ট্রিং ফর্ম্যাটে জাভাস্ক্রিপ্ট অবজেক্টের সামগ্রী প্রদর্শন করতে ES6 টেম্পলেট আক্ষরিক ধারণাটি ব্যবহার করতে পারেন।

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

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.