Друкувати оброблений JSON об'єкт?


200

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

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

Я отримую кілька [об'єкт] в списку. Мені цікаво, як би я надрукував це для того, щоб переглянути вміст?


5
як sidenote, для (властивості в 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 вдалий знімок для форматування об'єкта в консолі.
лекант

@Shahar дякую, твоя була потрібною мені інформацією. Слід додати до відповіді.
Лев Флахерті

3
Окрім методу @DaveAnderson, використання кома для відокремлення рядків від об'єктів також може:console.log("My object: ", obj)
Шахар

571

Ви знаєте, що означає JSON? Позначення об’єкта JavaScript . Це робить досить хороший формат для об’єктів.

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


12
Я здивований, що ця відповідь знаходиться внизу ...... Це має бути прийнята відповідь :-)
Mingyu

1
Що робити, якщо ви не хочете представити рядок, а об'єкт, як він з'явився б у редакторі коду?
SuperUberDuper

5
@SuperUberDuper: ... Тоді ви б не намагалися побудувати представлення рядків, чи не так. :)
cHao

Я вважаю, що SuperUberDuper запитував, чи можна об'єкт записати чи переглянути, не перетворюючи його на рядок. Якщо для перегляду у веб-переглядачі DOM потрібен елемент, ви можете впорядкувати json таким чином і встановити вміст елементів у внутрішній HTMLML до цього рядка, щоб переглянути його на сторінці.
Jasonleonhard

Наприклад: імпортувати Json з './data.json'; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
Jasonleonhard

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
олибре

Чудово! Це найкраще рішення для мене. Дякую.
Хоанг Ле

1
що з вузлом js?
Xsmael

добре, але не підтримує конкатенацію рядків, як журнал ("рядок" + змінна)
Nassim

47

Якщо ви хочете симпатичний багаторядковий 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) вона не працює.


40

щоб надрукувати JSON синтаксичний розбір об'єкта просто введіть,

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

і ви отримаєте результат дуже зрозумілий


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
Anthonius

3

Просто використовуйте

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

і ви отримаєте це в хромованій консолі:

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 (гарненький друк на сервері):

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.