Czy wydrukować obiekt JSON?


200

Mam obiekt javascript, który został przeanalizowany za pomocą JSON. JSON.parseChcę teraz wydrukować obiekt, aby móc go debugować (coś działa nie tak z funkcją). Kiedy wykonam następujące czynności ...

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

Dostaję na liście wiele [Object Object]. Zastanawiam się, jak mam to wydrukować, aby wyświetlić zawartość?


5
jako sidenote, dla (property in obj) wyświetli wszystkie właściwości, nawet te odziedziczone. W ten sposób otrzymasz wiele niepotrzebnych elementów dla Object.prototype i każdej „klasy matki”. Jest to niewygodne w przypadku obiektów Json. Musisz je przefiltrować za pomocą hasOwnProperty (), aby uzyskać tylko właściwości, które ten obiekt posiada.
BiAiB

Odpowiedzi:


124

Większość konsol debugujących obsługuje bezpośrednie wyświetlanie obiektów. Po prostu użyj

console.log(obj);

W zależności od debuggera najprawdopodobniej wyświetli obiekt w konsoli jako zwinięte drzewo. Możesz otworzyć drzewo i obejrzeć obiekt.


122
Warto wspomnieć, że w chrome (i być może w innych przeglądarkach) w połączeniu z ciągiem takim jak ten: console.log("object: " + obj)nie wyświetla obiektu, ale zamiast tego wyświetla „obiekt: [Obiekt obj]”.
Shahar

24
@Shahar console.log("object: %O", obj)(Chrome) lub console.log("object: %o", obj)(Firefox | Safari) da ci dostęp do szczegółów obiektu, zobacz moją odpowiedź poniżej.
Dave Anderson

1
@DaveAnderson dobre zdjęcie do formatowania obiektów w konsoli.
lekant

@ Shahar dzięki, twoja była informacja, której potrzebowałem. Należy dodać do odpowiedzi.
Leo Flaherty

3
Oprócz metody @DaveAnderson, użycie przecinka do oddzielania ciągów znaków od obiektów może również działać:console.log("My object: ", obj)
Shahar

571

Wiesz, co oznacza JSON? JavaScript Object Notation . To całkiem niezły format dla obiektów.

JSON.stringify(obj) zwróci ci ciąg reprezentujący obiekt.


12
Dziwi mnie, że ta odpowiedź jest na dole ...... To powinna być zaakceptowana odpowiedź :-)
Mingyu

1
Co jeśli nie chcesz reprezentacji ciągu, a raczej obiektu takiego, jak w edytorze kodu?
SuperUberDuper,

5
@SuperUberDuper: ... W takim razie nie próbowałbyś zbudować reprezentacji łańcucha. :)
cHao

Wierzę, że SuperUberDuper pytał, czy obiekt może zostać zarejestrowany lub wyświetlony bez konwersji na ciąg znaków. Jeśli przeglądasz w przeglądarce, DOM potrzebuje elementu, możesz tak skreślić json i ustawić zawartość elementów innerHTML na ten ciąg, aby wyświetlić go na stronie.
jasonleonhard,

Na przykład: zaimportuj Json z „./data.json”; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
jasonleonhard,

54

spróbuj console.dir()zamiastconsole.log()

console.dir(obj);

MDN mówi, że console.dir()jest obsługiwany przez:

  • FF8 +
  • IE9 +
  • Opera
  • Chrom
  • Safari

1
Dostępne tylko w IE9 +
jasonscript

3
console.dir()jest również dostępny w FF8 +, Opera, Chrome i Safari: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre

Wspaniały! To dla mnie najlepsze rozwiązanie. Dzięki.
Hoang Le

1
co z węzłem js?
Xsmael,

dobrze, ale nie obsługuje konkatenacji ciągów, takich jak log („ciąg” + zmienna)
Nassim

47

Jeśli chcesz ładnego, wielowierszowego JSON z wcięciem, możesz użyć JSON.stringifyjego trzeciego argumentu:

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

Na przykład:

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

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

lub

JSON.stringify(obj, null, 4);

da ci następujący wynik:

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

W przeglądarce console.log(obj)działa jeszcze lepiej, ale w konsoli powłoki (node.js) tak nie jest.


40

aby wydrukować przeanalizowany obiekt JSON, wystarczy wpisać,

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

a wynik będzie bardzo wyraźny


25

Użyj formatów ciągów;

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

Chrome ma specyfikatory formatu z następującymi;

  • %s Formatuje wartość jako ciąg.
  • %dlub %iFormatuje wartość jako liczbę całkowitą.
  • %f Formatuje wartość jako wartość zmiennoprzecinkową.
  • %o Formatuje wartość jako rozwijany element DOM (jak w panelu Elementy).
  • %O Formatuje wartość jako rozszerzalny obiekt JavaScript.
  • %c Formatuje ciąg wyjściowy zgodnie z podanymi stylami CSS.

Firefox ma również podstacje łańcuchowe, które mają podobne opcje.

  • %oWysyła hiperłącze do obiektu JavaScript. Kliknięcie linku otwiera inspektora.
  • %dlub %iZwraca liczbę całkowitą. Formatowanie nie jest jeszcze obsługiwane.
  • %s Wysyła ciąg znaków.
  • %fZwraca wartość zmiennoprzecinkową. Formatowanie nie jest jeszcze obsługiwane.

Safari ma formaty w stylu printf

  • %dlub liczba %icałkowita
  • %[0.N]f Wartość zmiennoprzecinkowa z dokładnością N cyfr
  • %o Obiekt
  • %s Strunowy

1
ładna odpowiedź
David,

1
% O jest naprawdę pomocny
everton,

4

Ładne i proste:

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

1
czy mógłbyś opisać, do czego służy% O? powinien to być O konkretnie? - Twoje rozwiązanie działa jak urok
Anthonius

O oznacza obiekt, więc tak długo, jak obiekt może być drukowany jako ciąg znaków, powinien być drukowany bez żadnych problemów. Pomogło mi to w rozwiązywaniu problemów w wielu przypadkach, w których nie byłem pewien, gdzie jest błąd
mbenhalima,

Zapomniałem poinformować tutaj, w rzeczywistości nie musimy używać% O. Możemy bezpośrednio korzystać z console.log ("object:", obj) dziękuję @mbenhalima
Anthonius

3

Po prostu użyj

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

a dostaniesz to w konsoli chrome:

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

Prosta funkcja ostrzegająca o zawartości obiektu lub tablicy.
Wywołaj tę funkcję z tablicą, łańcuchem lub obiektem ostrzegającym o zawartości.

Funkcjonować

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

Stosowanie

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

2

Poniższy kod wyświetli pełne dane Json w polu alertu

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

Jeśli chcesz debugować, skorzystaj z debugowania konsoli

window.console.debug(jsonObject);

0

Jeśli pracujesz w js na serwerze, trochę więcej gimnastyki przechodzi długą drogę ... Oto moje ppos (ładne drukowanie na serwerze):

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

która wykonuje super zadanie polegające na stworzeniu czegoś, co właściwie mogę przeczytać podczas pisania kodu serwera.


0

Nie wiem, jak to nigdy nie zostało oficjalnie utworzone, ale dodałem własną jsonmetodę, by consolesprzeciwić się drukowaniu łańcuchów logów:

Obserwowanie obiektów (nie-pierwotnych) w javascript jest trochę jak mechanika kwantowa. To, co „mierzysz”, może nie być rzeczywistym stanem, który już się zmienił.

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

Wiele razy konieczne jest wyświetlenie strunkowatej wersji obiektu, ponieważ wydrukowanie go w stanie „jak jest” (obiekt surowy) spowoduje wydrukowanie „żywej” wersji obiektu, która ulega mutacji w miarę postępu programu i nie będzie odzwierciedlać stanu obiektu w zarejestrowanym momencie, na przykład:

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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.