Kako mogu prikazati objekt javascript?

Kako prikazati sadržaj JavaScript objekta u formatu stringa, na primjer, kada smo varijabla alert ?

Isti oblikovani način na koji želim prikazati objekt.

1348
05 июня '09 в 22:01 2009-06-05 22:01 maxjackie postavljen na 05. lipnja u 22:01 2009-06-05 22:01
@ 38 odgovora
  • 1
  • 2

S Firefoxom

Ako želite ispisati objekt u svrhu otklanjanja pogrešaka, predlažem da instalirate Firebug za Firefox i koristite kôd:

 console.log(obj) 

S Chromeom

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

će se prikazati

2019

Koristite vlastitu metodu JSON.stringify . Ova metoda podržava rad s ugniježđenim objektima i svim većim preglednicima.

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

Veza na Mozilla API Reference i druge primjere.

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

Koristite redovnu zamjenu JSON.stringify ako naiđete na ovu Javascript grešku.

 "Uncaught TypeError: Converting circular structure to JSON" 
1793
27 нояб. Odgovor dao Sandeep 27. studenog 2010-11-27 20:52 '10 u 20:52 2010-11-27 20:52
 var output = ''; for (var property in object) { output += property + ': ' + object[property]+'; '; } alert(output); 
372
05 июня '09 в 22:18 2009-06-05 22:18 odgovor je dao Flavius ​​Stef 5. lipnja 2009. u 10:18 2009-06-05 22:18

console.dir(object) :

Prikazuje interaktivni popis svojstava navedenog objekta javascript. Ovaj popis omogućuje vam da koristite proširene trokute da biste ispitali sadržaj podređenih objekata.

Imajte na umu da je funkcija console.dir() nestandardna. Pogledajte MDN Web Documents

106
03 июня '14 в 15:43 2014-06-03 15:43 odgovor je dao Pizzaiola Gorgonzola 03. lipnja 2014. u 15:43 2014-06-03 15:43

pokušajte sljedeće:

 console.log(JSON.stringify(obj)) 

To će ispisati niz verzije objekta. Stoga, umjesto [object] kao output, dobivate sadržaj objekta.

67
12 авг. Odgovor dao Abhishek Goel 12. kol. 2015-08-12 10:53 '15 u 10:53 2015-08-12 10:53

Pa, Firefox (zahvaljujući @Bojangles za detaljne informacije) ima Object.toSource() koja ispisuje objekte kao JSON i function(){} .

To je dovoljno za većinu svrhe otklanjanja pogrešaka, mislim.

64
05 июня '09 в 22:04 2009-06-05 22:04 odgovor je dat alamar lipanj 05 '09 u 22:04 2009-06-05 22:04

Ako želite koristiti upozorenje za ispis objekta, učinite sljedeće:

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

Mora ispisati svako svojstvo i njegovu odgovarajuću vrijednost u string formatu.

51
09 сент. Odgovor dao Garry Sep 09 2010-09-09 10:15 '10 u 10:15 2010-09-09 10:15

U NodeJS, možete ispisati objekt pomoću util.inspect(obj) . Ne zaboravite odrediti dubinu ili ćete imati samo mali otisak predmeta.

32
15 июля '13 в 9:35 2013-07-15 09:35 Odgovor je dao Lander 15. srpnja '13 u 9:35 2013-07-15 09:35

funkcija:

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

primjena:

 var myObject = { name: 'Wilson Page', contact: { email: 'wilson@hotmail.com', tel: '123456789' } } $('body').append( print(myObject) ); 

primjer:

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

31
16 нояб. Odgovor je dat wilsonpage 16 Nov. 2011-11-16 17:37 '11 u 17:37 2011-11-16 17:37

Ako želite vidjeti podatke u obliku tablice, možete ih koristiti

 console.table(obj); 

Tablicu možete razvrstati ako kliknete na stupac tablice.

Također možete odabrati koji će se stupci prikazivati:

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

Više informacija o konzoli.table možete pronaći ovdje.

30
26 марта '15 в 15:43 2015-03-26 15:43 odgovor je dao Vlad Bezden 26. ožujka u 15:43 2015-03-26 15:43

Kao što je već rečeno, na najbolji i najlakši način sam pronašao

 var getPrintObject=function(object) { return JSON.stringify(object); } 
18
08 окт. odgovor je dan yonia 08 okt. 2014-10-08 16:57 '14 u 16:57 2014-10-08 16:57

Koristite ovo:

 console.log('print object: ' + JSON.stringify(session)); 
17
15 июля '13 в 7:00 2013-07-15 07:00 odgovor je dao Walter Caraza 15. srpnja 2013. u 7:00 sati 2013-07-15 07:00

Za ispis cijelog objekta pomoću Node.js s bojama kao bonus:

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

Boje, naravno, su opcionalne, "dubina: null" će ispisati cijeli objekt.

Preglednici nisu podržani.

reference:

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

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

17
14 июня '17 в 20:22 2017-06-14 20:22 odgovor je dao jpoppe 14. lipnja '17 u 20:22 2017-06-14 20:22

Ako želite ispisati objekt njegove pune dužine, možete ga koristiti

check (obj, {showHidden: false, dubina: null})

Ako želite ispisati objekt, pretvorite ga u niz

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

15
17 апр. odgovor je dan sreepurna 17 apr. 2017-04-17 11:29 '17 u 11:29 2017-04-17 11:29

Trebao sam način rekurzivno ispisati objekt koji je odgovorio na stranici (hvala!). Ažurirao sam ga malo kako bi se omogućilo ispisivanje na određenoj razini, i dodao interval tako da je ispravno uvučen na temelju trenutne razine u kojoj se nalazimo, tako da je čitljiviji.

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

Upotreba:

 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) ); 
11
09 авг. Odgovor je dan megaboss98 09 aug. 2012-08-09 02:42 '12 u 2:42 2012-08-09 02:42

(Ovo je dodano u moju biblioteku GitHub .)

Promislite o kotaču ovdje! Nijedno od tih rješenja nije djelovalo na moju situaciju. Tako sam brzo preradio odgovor na stranicu. Ovo nije za ispis na zaslon (putem konzole, tekstualnog polja ili nečeg drugog). Međutim, to je prijenos podataka. Čini se da ova verzija vraća vrlo sličan rezultat kao toSource() . Nisam pokušao JSON.stringify , ali mislim da je otprilike isto. Rezultat ove funkcije je valjana Javascript deklaracija objekta.

Ne bih sumnjao da je nešto poput ovoga već bilo negdje na SO-u, ali bilo je samo kraće od gubitka vremena u potrazi za prošlim odgovorima. A budući da je ovo pitanje bio moj najbolji google hit, kada sam ga počeo tražiti; Mislio sam da bi to moglo pomoći drugima.

U svakom slučaju, rezultat ove funkcije će biti nizovni prikaz vašeg objekta, čak i ako vaš objekt ima ugrađene objekte i nizove, pa čak i ako ti objekti ili nizovi još uvijek imaju ugrađene objekte i nizove. (Čuo sam kako volite piti? Znači, pio sam vaš automobil s hladnjakom, a onda sam pio hladnjak s hladnjakom. Dakle, vaš hladnjak može piti dok ste hladni).

Nizovi se pohranjuju s [] umjesto {} i stoga nemaju parove ključ / vrijednost, samo vrijednosti. Poput običnih polja. Stoga su stvoreni kao nizovi.

Osim toga, citira se cijeli niz (uključujući nazive ključeva), što je opcionalno, osim ako ti nizovi nemaju posebne znakove (na primjer, razmak ili kosu crtu). Ali nisam ga htio otkriti samo da bih uklonio neke citate koji bi inače dobro funkcionirali.

Tada možete upotrijebiti ovaj niz rezultata s eval ili ga jednostavno ispustiti u string varijablu. Dakle, ponovno kreirajte svoj objekt iz teksta.

 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)+"]"; } 

Javi mi ako sam zabrljao, dobro radi u mom testiranju. Osim toga, jedini način za otkrivanje vrsta array je provjera prisutnosti length . Budući da Javascript stvarno pohranjuje nizove kao objekte, ne mogu provjeriti array tipova (ne postoji takav tip!) Ako netko drugi zna najbolji način, volio bih ga čuti. Jer ako vaš objekt ima i svojstvo pod nazivom length ova funkcija će ga pogrešno tretirati kao niz.

EDIT: Dodana je provjera objekata s nultom ocjenom. Hvala, Brock Adams

EDIT: U nastavku je fiksna funkcija koja vam omogućuje ispis beskonačno rekurzivnih objekata. Ne ispisuje isto kao toSource iz FF-a, jer će toSource ispisati beskonačnu rekurziju, gdje će je, ova funkcija odmah uništiti. Ova funkcija je sporija od prethodne, tako da je ovdje dodajem umjesto uređivanja gornje funkcije, jer je trebate samo ako planirate prebaciti objekte koji se negdje odnose na sebe.

 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)+"]"; } 

ispit:

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

rezultat:

 {'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}}) 

NAPOMENA. Pokušajte ispisati document.body - strašan primjer. Prvo, FF jednostavno ispisuje prazan objektni niz kada koristi toSource . A kada koristite gore navedenu funkciju, FF se ruši iz SecurityError: The operation is insecure. I Chrome će se srušiti na Uncaught RangeError: Maximum call stack size exceeded . Očito, document.body nije namjeravao pretvoriti u niz. Budući da je prevelik ili protiv sigurnosnih pravila za pristup određenim svojstvima. Ako nisam pokvario nešto ovdje, nemojte reći!

10
12 дек. Odgovor daje Pimp Trizkit 12. prosinca. 2012-12-12 17:36 '12 u 17:36 2012-12-12 17:36

Najlakši način:

 console.log(obj); 

Ili s porukom:

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

Prvi objekt koji prođete može sadržavati jedan ili više specifikatora formata. Specifikator formata sastoji se od znaka postotka (%) i slova koje označava da je oblikovanje primjenjivo.

Više specifikatora formata

6
04 июля '16 в 7:56 2016-07-04 07:56 odgovor je dao 3DRobert 4. srpnja '16. u 7:56 2016-07-04 07:56

Uvijek koristim console.log("object will be: ", obj, obj1) . dakle, ne trebam napraviti zaobilazno rješenje pomoću niza s JSON-om. Sva svojstva objekta bit će dobro proširena.

6
20 окт. odgovor nils petersohn 20. list . 2015-10-20 12:43 '15 u 12:43 sati 2015-10-20 12:43

Pretpostavimo da je objekt obj = {0:'John', 1:'Foo', 2:'Bar'}

Ispišite sadržaj objekta

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

Izlaz konzole (Chrome DevTools):

 John 0 Foo 1 Bar 2 

Nadam se da ovo pomaže!

5
02 авг. odgovor je dat biskupu 02 aug 2016-08-02 19:15 '16 u 19:15 2016-08-02 19:15
 var list = function(object) { for(var key in object) { console.log(key); } } 

gdje je object vaš objekt

ili ga možete koristiti u chrome dev alatima, kartici "konzola":

console.log(object);

5
05 февр. odgovor daje korisnik3632930 05. veljače. 2015-02-05 21:24 '15 u 21:24 2015-02-05 21:24

Funkcija Javascript

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

Ispis objekta

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

putem print_r u javascript

4
21 янв. Odgovor Mukesh Chapagaina 21. siječnja 2015-01-21 16:45 '15 u 16:45 2015-01-21 16:45

Drugi način prikaza objekata u konzoli je korištenje JSON.stringify . U nastavku Checkout:

 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)); 
4
19 июня '18 в 20:33 2018-06-19 20:33 Odgovor je dao Kean Amaral 19. lipnja 18. u 20:33 sati 2018-06-19 20:33

Jedan od najboljih i najlakših načina je korištenje console.dir ();

 console.dir(yourObject); 
4
21 июля '17 в 18:15 2017-07-21 18:15 odgovor je dao Guillaume Huard Hughes 21. srpnja 2006. u 18:15 2017-07-21 18:15

Evo kako to učiniti:

 console.log("%o", obj); 
3
31 мая '18 в 15:26 2018-05-31 15:26 odgovor je dao tryzniak 31. svibnja '18 u 15:26 2018-05-31 15:26

Mala pomoćna funkcija koju uvijek koristim u svojim projektima za jednostavno i brzo otklanjanje pogrešaka kroz konzolu. Inspiracija je preuzeta od Laravel-a.

  function dd(variable, varName) { var varNameOutput; varName = varName || ''; varNameOutput = varName ? varName + ':' : ''; console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')'); } 

Upotreba

dd(123.55); izlazi:
2019

08 нояб. odgovor je dao George Kagan 08. studenog. 2016-11-08 15:53 '16 u 15:53 2016-11-08 15:53

Još jedna modifikacija pagewils koda ... ne ispisuje ništa osim redaka i ostavlja broj i logička polja prazna, a na drugoj sam vrsti ispravio pogrešku u funkciji koju je stvorio megaboss.

 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
26 июля '16 в 15:24 2016-07-26 15:24 odgovor je dat ppetree 26. srpnja '16 u 15:24 2016-07-26 15:24

Mislim da je najbolje rješenje pogledati ključeve objekata, a zatim vrijednosti objekata, ako doista želite vidjeti što objekt sadrži ...

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

Tu je i ova nova opcija ako koristite ECMAScript 2016 ili noviji:

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

Gore spomenuto rješenje: console.log(obj) prikazuje previše parametara i nije najpogodniji način za prikazivanje podataka koji su vam potrebni . Zato preporučujem da se ključevi, a zatim vrijednosti odvojeno registriraju.

2
19 окт. Odgovori Max Alexander Hanna 19. listopada 2018-10-19 15:29 '18 u 15:29 2018-10-19 15:29

Ovdje je funkcija.

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

Može prikazati objekt pomoću kartice kartica s čitljivošću.

2
11 июня '17 в 15:26 2017-06-11 15:26 Odgovor Juho Sung dana 11. lipnja 2006. u 15:26 2017-06-11 15:26

Koristio sam metodu za ispis stranice i to je dobro funkcioniralo.

ovdje je moja malo poboljšana inačica s (neurednim) otiscima i odvojenim razdjelnicima prop / obima:

 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; }; 
2
27 марта '13 в 22:52 2013-03-27 22:52 odgovor je dan bezvrijedno 27. ožujka '13 u 22:52 2013-03-27 22:52

možda tražite ovo

console.dir ()

2
25 янв. odgovor je dan sandrosanchez 25 jan. 2017-01-25 18:19 '17 u 18:19 2017-01-25 18:19
  • 1
  • 2

Ostala pitanja o oznakama ili Postavite pitanje