2011-02-08 36 views
145

Ho un oggetto javascript che è stato analizzato JSON utilizzando JSON.parse Ora voglio stampare l'oggetto in modo che possa eseguire il debug (qualcosa non funziona correttamente). Quando faccio quanto segue ...Stampa oggetto analizzato JSON?

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

Ho più oggetti [oggetto oggetto] elencati. Mi chiedo come faccio a stamparlo per poter visualizzare i contenuti?

+5

come nota a margine, per (proprietà in obj) elencherà tutte le proprietà, anche quelle ereditate. In questo modo otterrete molte estranee per Object.prototype e ogni 'mother class'. Questo è scomodo con oggetti JSON. Devi filtrarli con hasOwnProperty() per ottenere solo le proprietà che questo oggetto possiede. – BiAiB

risposta

89

La maggior parte delle console di debug supporta la visualizzazione diretta degli oggetti. Basta usare

console.log(obj); 

A seconda del debugger questo molto probabilmente visualizzare l'oggetto nella console come un albero crollato. È possibile aprire l'albero e ispezionare l'oggetto.

+74

Vale la pena ricordare che in chrome (e forse in altri browser) quando combinato con una stringa come questa: 'console.log (" oggetto: "+ obj)' non visualizza l'oggetto, ma invece produrrà "oggetto: [Object obj]". – Shahar

+14

@Shahar 'console.log (" oggetto:% O ", obj)' (Chrome) o 'console.log (" oggetto:% o ", obj)' (Firefox | Safari) ti darà accesso ai dettagli dell'oggetto , vedi la mia risposta qui sotto. –

+1

@DaveAnderson ottimo scatto per la formattazione dell'oggetto nella console. – lekant

44

provare console.dir() invece di console.log()

console.dir(obj); 

MDN dice console.dir() è supportata da:

  • FF8 +
  • IE9 +
  • Opera
  • Chrome
  • Safari
+0

Bello. Non ero a conoscenza di console.dir – palaniraja

+1

Disponibile solo in IE9 + – jasonscript

+3

'console.dir()' è disponibile anche in FF8 +, Opera, Chrome e Safari: https://developer.mozilla.org/en-US/docs/ Web/API/console.dir – olibre

440

Sai cosa significa JSON? Notazione oggetto JavaScript. Rende un formato abbastanza buono per gli oggetti.

JSON.stringify(obj) restituirà una rappresentazione di stringa dell'oggetto.

+33

wow, che in realtà si chiama stringify :) – Gourneau

+4

Sono sorpreso che questa risposta sia in fondo ...... Questa dovrebbe essere la risposta accettata :-) – Mingyu

+1

E se non vuoi una rappresentazione stringa, ma piuttosto l'oggetto come apparirebbe in un editor di codice? – SuperUberDuper

2

Funzione semplice per avvisare il contenuto di un oggetto o di un array.
Chiama questa funzione con un array o una stringa o un oggetto che avvisa del contenuto.

Funzione

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

Uso

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

Il codice seguente visualizza i dati completi JSON nella finestra di avviso

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

Basta usare

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

e otterrete questo in consolle cromata:

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 
18

formati Usa stringa;

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

Chrome ha Format Specifiers con quanto segue;

  • %s Formatta il valore come stringa.
  • %d o %i Formatta il valore come un numero intero.
  • %f Formatta il valore come valore in virgola mobile.
  • %o Formatta il valore come elemento DOM espandibile (come nel pannello Elementi ).
  • %O Formatta il valore come oggetto JavaScript espandibile .
  • %c Formatta la stringa di output in base agli stili CSS forniti da .

Firefox ha anche String Substitions che hanno opzioni simili.

  • %o Emette un collegamento ipertestuale a un oggetto JavaScript. Cliccando sul link si apre un ispettore.
  • %d o %i Emette un numero intero. La formattazione non è ancora supportata.
  • %s Emette una stringa.
  • %f Emette un valore in virgola mobile. La formattazione non è ancora supportata.

Safari ha printf style formatters

  • %d o %i intero
  • %[0.N]f valore in virgola mobile con N cifre di precisione
  • %o oggetto
  • %s String
+0

risposta di riferimento piacevole –

+0

% O è davvero utile – everton

30

Se si desidera una bella, JSON multilinea con indentazione allora si può usare JSON.stringify con il suo 3 ° argomento:

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

Ad esempio:

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

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

o

JSON.stringify(obj, null, 4); 

vi darà seguente risultato:

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

In un browser console.log(obj) fa lavoro ancora migliore, ma in una console di shell (node.js) non è così.

2

Se si desidera eseguire il debug perché non usare console di debug

window.console.debug(jsonObject); 
18

per la stampa JSON oggetto analizzato basta digitare

console.log(JSON.stringify(data, null, " "));

e otterrete uscita molto chiaro