Распечатать JSON-анализируемый объект?


200

У меня есть объект javascript, который был проанализирован с помощью JSON. JSON.parseТеперь я хочу напечатать объект, чтобы я мог его отладить (что-то не так с функцией). Когда я делаю следующее ...

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

Я получаю несколько [объект объекта] в списке. Мне интересно, как бы я распечатать это, чтобы просмотреть содержимое?


5
в качестве идентификатора, for (свойство в obj) перечислит все свойства, даже унаследованные. Таким образом, вы получите много посторонних для Object.prototype и любого «материнского класса». Это неудобно с объектами json. Вы должны отфильтровать их с помощью hasOwnProperty (), чтобы получить только те свойства, которыми владеет этот объект.
BiAiB

Ответы:


124

Большинство консолей отладчика поддерживают непосредственное отображение объектов. Просто используйте

console.log(obj);

В зависимости от вашего отладчика, это наиболее вероятно будет отображать объект в консоли в виде свернутого дерева. Вы можете открыть дерево и осмотреть объект.


122
Стоит отметить, что в chrome (и, возможно, в других браузерах) в сочетании со строкой, подобной этой: console.log("object: " + obj)он не отображает объект, а вместо этого выдает «object: [Object obj]».
Шахар

24
@Shahar console.log("object: %O", obj)(Chrome) или console.log("object: %o", obj)(Firefox | Safari) предоставят вам доступ к деталям объекта, см. Мой ответ ниже.
Дейв Андерсон

1
@DaveAnderson хороший снимок для форматирования объектов в консоли.
lekant

@ Shahar спасибо, твоя информация была мне нужна. Следует добавить к ответу.
Лео Флаэрти

3
В дополнение к методу @DaveAnderson, использование запятой для отделения строк от объектов также может работать:console.log("My object: ", obj)
Shahar

571

Вы знаете, что означает JSON? Нотация объектов JavaScript . Это делает довольно хороший формат для объектов.

JSON.stringify(obj) вернет вам строковое представление объекта.


12
Я удивлен, что этот ответ внизу ...... Это должен быть принятый ответ :-)
Mingyu

1
Что если вам не нужно строковое представление, а объект, который будет отображаться в редакторе кода?
SuperUberDuper

5
@SuperUberDuper: ... Тогда вы бы не пытались создать строковое представление, не так ли? :)
cHao

Я полагаю, что SuperUberDuper спрашивал, может ли объект быть зарегистрирован или просмотрен без преобразования его в строку. Если для просмотра в браузере DOM нужен элемент, вы можете зашифровать json, а затем установить для содержимого строки innerHTML эту строку, чтобы просмотреть его на странице.
Джейсон Леонард

Например: импортировать Json из './data.json'; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
Джейсон Леонард

54

попробуй console.dir()вместоconsole.log()

console.dir(obj);

MDN говорит, console.dir()что поддерживается:

  • FF8 +
  • IE9 +
  • опера
  • Хром
  • Сафари

1
Доступно только в IE9 +
jasonscript

3
console.dir()также доступен в FF8 +, Opera, Chrome и Safari: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre

Большой! Это лучшее решение для меня. Спасибо.
Хоанг Ле

1
как насчет узла JS?
Xsmael

хорошо, но не поддерживает конкатенацию как журнал ( «строка» + переменная)
Нассим

48

Если вам нужен симпатичный многострочный JSON с отступом, вы можете использовать JSON.stringifyего с третьим аргументом:

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

Например:

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

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

или

JSON.stringify(obj, null, 4);

даст вам следующий результат:

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

В браузере console.log(obj)работает еще лучше, а в консоли оболочки (node.js) - нет.



25

Используйте строковые форматы;

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

Chrome имеет спецификаторы формата со следующим;

  • %s Форматирует значение в виде строки.
  • %dили %iФорматирует значение как целое число.
  • %f Форматирует значение как значение с плавающей запятой.
  • %o Форматирует значение как расширяемый элемент DOM (как на панели «Элементы»).
  • %O Форматирует значение как расширяемый объект JavaScript.
  • %c Форматирует выходную строку в соответствии с предоставленными вами стилями CSS.

Firefox также имеет String Substitions, которые имеют аналогичные параметры.

  • %oВыводит гиперссылку на объект JavaScript. При нажатии на ссылку открывается инспектор.
  • %dили %iвыводит целое число. Форматирование пока не поддерживается.
  • %s Выводит строку.
  • %fВыводит значение с плавающей точкой. Форматирование пока не поддерживается.

Safari имеет форматтеры в стиле printf

  • %dили %iцелое число
  • %[0.N]f Значение с плавающей точкой с N цифрами точности
  • %o объект
  • %s строка

1
хороший справочный ответ
Дэвид

1
% O действительно полезен
everton

4

Красиво и просто:

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

1
Не могли бы вы описать, для чего% O? это должно быть O конкретно? - ваше решение работает как шарм
Антоний

O обозначает объект, поэтому, пока объект может печататься как строка, он должен быть напечатан без проблем. Это помогло мне устранить неполадки во многих случаях, когда я не был уверен, где ошибка
mbenhalima

Я забыл сообщить здесь, на самом деле нам не нужно использовать% O. Мы можем напрямую использовать console.log ("object:", obj) спасибо @mbenhalima
Антоний

3

Просто используйте

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

и вы получите это в консоли 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

Простая функция для оповещения о содержимом объекта или массива.
Вызовите эту функцию с массивом или строкой или объектом, который предупреждает содержимое.

функция

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

использование

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

2

Следующий код отобразит полные данные JSON в окне предупреждения

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

Если вы хотите отладить, почему бы не использовать консольную отладку

window.console.debug(jsonObject);

0

Если вы работаете в js на сервере, немного больше гимнастики проходит долгий путь ... Вот мой ppos (pretty-print-on-server):

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

которая делает огромную работу по созданию чего-то, что я действительно могу прочитать, когда пишу код сервера.


0

Я не знаю, как это никогда не делалось официально, но я добавил свой собственный jsonметод к consoleобъекту, чтобы упростить печать строковых журналов:

Наблюдение за объектами (не примитивами) в javascript немного похоже на квантовую механику. То, что вы «измеряете», может не быть реальным состоянием, которое уже изменилось.

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

Много раз необходимо просматривать строковую версию объекта, потому что печать его как есть (необработанный объект) будет печатать «живую» версию объекта, которая мутирует в ходе выполнения программы, и не будет отражать состояние объекта в зарегистрированный момент времени, например:

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
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.