it-swarm.com.ru

Как я могу отобразить объект JavaScript?

Как отобразить содержимое объекта JavaScript в строковом формате, например, когда мы alert переменная?

Тот же форматированный способ, которым я хочу отобразить объект.

1359
maxjackie

С Firefox

Если вы хотите напечатать объект для целей отладки, я предлагаю вместо этого установить Firebug for Firefox и использовать код:

console.log(obj)

С Chrome

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

будет отображать 

 screenshot console chrome

Примечание: вы должны только зарегистрировать объект. Например, это не будет работать:

console.log('My object : ' + obj)
849
Triptych

Используйте собственный метод JSON.stringify. Работает с вложенными объектами и всеми основными браузерами support this method.

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

Ссылка на Справочник по Mozilla API и другие примеры.

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

Используйте пользовательский JSON.stringify replacer , если вы Столкнулись с этой ошибкой Javascript

"Uncaught TypeError: Converting circular structure to JSON"
1808
Sandeep
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);
373
Flavius Stef

console.dir(object):

Отображает интерактивный список свойств указанного объекта JavaScript. Этот листинг позволяет использовать раскрывающие треугольники для проверки содержимого дочерних объектов.

Обратите внимание, что функция console.dir() не является стандартной. Смотрите MDN Web Docs

107
Pizzaiola Gorgonzola

попробуй это :

console.log(JSON.stringify(obj))

Это напечатает строковую версию объекта. Так что вместо [object] в качестве вывода вы получите содержимое объекта.

67
Abhishek Goel

Что ж, Firefox (спасибо @Bojangles за подробную информацию) имеет Object.toSource() метод, который печатает объекты как JSON и function(){}.

Я полагаю, этого достаточно для большинства целей отладки.

64
alamar

Если вы хотите использовать оповещение, чтобы напечатать ваш объект, вы можете сделать это:

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

Он должен печатать каждое свойство и соответствующее ему значение в строковом формате.

51
Garry

В NodeJS вы можете распечатать объект, используя util.inspect(obj) . Обязательно укажите глубину, иначе у вас будет только мелкий отпечаток объекта. 

32
Lander

Функция:

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

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

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

Пример:

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

31
wilsonpage

Если вы хотите видеть данные в табличном формате, вы можете использовать

console.table(obj);

Таблица может быть отсортирована, если вы нажмете на столбец таблицы.

Вы также можете выбрать, какие столбцы показывать:

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

Вы можете найти больше информации о console.table здесь

30
Vlad Bezden

Как было сказано ранее, лучший и самый простой способ, который я нашел, был 

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}
18
yonia

Чтобы напечатать полный объект с Node.js с цветами в качестве бонуса:

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

Цвета, конечно, не являются обязательными, «глубина: ноль» будет печатать весь объект.

Опции не поддерживаются в браузерах.

Рекомендации:

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

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

17
jpoppe

Использовать этот:

console.log('print object: ' + JSON.stringify(session));
17
Walter Caraza

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

console.log (require ('util'). inspect (obj, {showHidden: false, глубина: ноль})

Если вы хотите напечатать объект, преобразовав его в строку, то

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

15
sreepurna

Мне нужен был способ рекурсивной печати объекта, который предоставил ответ страницы (Спасибо!). Я немного обновил его, чтобы включить способ печати до определенного уровня и добавить интервал, чтобы он был правильно с отступом в зависимости от текущего уровня, на котором мы находимся, чтобы он был более читабельным.

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

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

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        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
megaboss98

(Это было добавлено в мою библиотеку на GitHub )

Изобретая колесо здесь! Ни одно из этих решений не помогло в моей ситуации. Итак, я быстро подправил ответ Пейджа. Этот не для печати на экран (через консоль или текстовое поле или что-то еще). Это, однако, для передачи данных. Эта версия, похоже, возвращает очень похожий результат как toSource(). Я не пробовал JSON.stringify, но я предполагаю, что это примерно то же самое. Результатом этой функции является допустимое объявление объекта Javascript.

Я не сомневаюсь, что что-то подобное уже было где-то SO, но сделать это было короче, чем потратить время на поиск ответов в прошлом. И так как этот вопрос был моим главным хитом в Google, когда я начал искать об этом; Я подумал, что это может помочь другим.

В любом случае, результатом этой функции будет строковое представление вашего объекта, даже если ваш объект имеет встроенные объекты и массивы, и даже если эти объекты или массивы имеют даже дополнительные встроенные объекты и массивы. (Я слышал, что вы любите пить? Итак, я поставил вашу машину на кулер. А потом я поставил на вашу машину кулер. Итак, ваш кулер может пить, пока вы остываете).

Массивы хранятся с [] вместо {} и, следовательно, не имеют пар ключ/значение, только значения. Как обычные массивы. Следовательно, они создаются как массивы.

Кроме того, все строки (включая имена ключей) заключаются в кавычки, в этом нет необходимости, если только эти строки не имеют специальных символов (например, пробел или косая черта). Но я не хотел обнаруживать это, просто чтобы удалить некоторые цитаты, которые в противном случае работали бы нормально.

Эта результирующая строка может затем использоваться с eval или просто вывести ее в манипуляции с переменной через строку. Таким образом, воссоздавая ваш объект снова, из текста.

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

Дайте мне знать, если я все испортил, отлично работает в моем тестировании. Кроме того, единственный способ определить тип array - это проверить наличие length. Поскольку Javascript действительно хранит массивы как объекты, я не могу проверить тип array (такого типа нет!). Если кто-нибудь знает лучший способ, я хотел бы услышать это. Потому что, если у вашего объекта также есть свойство с именем length, эта функция будет ошибочно рассматривать его как массив.

Правка: Добавлена ​​проверка для объектов с нулевым значением. Спасибо Брок Адамс

Правка: ниже фиксированная функция, чтобы иметь возможность печатать бесконечно рекурсивные объекты. Это не печатает так же, как toSource из FF, потому что toSource будет печатать бесконечную рекурсию один раз, где, как, эта функция немедленно убьет ее. Эта функция работает медленнее, чем приведенная выше, поэтому я добавляю ее сюда вместо редактирования вышеупомянутой функции, так как она нужна только в том случае, если вы планируете передавать объекты, которые ссылаются на себя, где-то.

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

Тестовое задание:

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

Результат:

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

ПРИМЕЧАНИЕ. Попытка напечатать document.body - ужасный пример. Например, FF просто печатает пустую строку объекта при использовании toSource. И при использовании функции выше, FF падает на SecurityError: The operation is insecure.. И Chrome рухнет на Uncaught RangeError: Maximum call stack size exceeded. Ясно, что document.body не предназначался для преобразования в строку. Потому что он либо слишком велик, либо против политики безопасности для доступа к определенным свойствам. Если я не испортил что-то здесь, скажи!

10
Pimp Trizkit

Я всегда использую console.log("object will be: ", obj, obj1). Таким образом, мне не нужно делать обходной путь с stringify с JSON . Все свойства объекта будут расширены.

6
nils petersohn

Самый простой способ:

console.log(obj);

Или с сообщением:

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

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

Больше спецификаторов формата

6
3DRobert

Предположим, объект obj = {0:'John', 1:'Foo', 2:'Bar'}

Распечатать содержимое объекта

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

Консольный вывод (Chrome DevTools):

John 0
Foo 1
Bar 2

Надеюсь, это поможет!

5
Bishop
var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

где object ваш объект

или вы можете использовать это в chrome dev tools, вкладка "console":

console.log(object);

5
user3632930

Еще один способ отображения объектов в консоли - JSON.stringify. Проверьте приведенный ниже пример:

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));
5
Kean Amaral

Просто использовать 

JSON.stringify(obj)

Пример

var args_string = JSON.stringify(obj);
console.log(args_string);

Или же 

alert(args_string);

Также обратите внимание, что в JavaScript функции рассматриваются как объекты.

На самом деле вы можете назначить новое свойство, как это

foo.moo = "stackoverflow";
console.log(foo.moo);
4
Raza Rafaideen

Функция 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>

Печать объекта

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

через print_r в Javascript

4
Mukesh Chapagain

Я думаю, что лучшим решением является просмотр ключей объектов, а затем значений объектов, если вы действительно хотите увидеть, что содержит объект ...

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

Он выведет что-то вроде:  enter image description here (на фото выше: ключи/значения, хранящиеся в объекте)

Существует также эта новая опция, если вы используете ECMAScript 2016 или новее: 

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

Это даст аккуратный вывод:  enter image description here Решение, упомянутое в предыдущем ответе: console.log(obj) отображает слишком много параметров и не самый удобный способ отображения нужных вам данных. Вот почему я рекомендую регистрировать ключи, а затем значения отдельно.

Следующий :

console.table(object)

Будет выводить что-то вроде этого на консоль:  enter image description here

Напоследок мой наименее любимый:

console.log(object)

будет производить что-то вроде:  enter image description here

4
Max Alexander Hanna

Вот способ сделать это:

console.log("%o", obj);
3
Anton Harniakou

Маленькая вспомогательная функция, которую я всегда использую в своих проектах для простой и быстрой отладки через консоль. Вдохновение взято из Laravel.

/**
 * @param variable mixed  The var to log to the console
 * @param varName string  Optional, will appear as a label before the var
 */
function dd(variable, varName) {
    var varNameOutput;

    varName = varName || '';
    varNameOutput = varName ? varName + ':' : '';

    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}

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

dd(123.55); выходы:
enter image description here

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

enter image description here

3
George Kagan

Еще одна модификация кода pagewils ... Его не выводит ничего, кроме строк, и оставляет пустыми числовые и логические поля, и я исправил опечатку во втором типе внутри функции, созданной 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
ppetree

я использовал метод печати Pagewil, и он работал очень хорошо. 

вот моя слегка расширенная версия с (небрежными) отступами и различными разделителями prop/ob:

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
bitless

Вот функция.

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

Он может показывать объект, используя вкладку с удобочитаемостью. 

2
Juho Sung

Если вы ищете что-то, что может вернуть предварительно подтвержденную строку любого объекта javascript, проверьте https://github.com/fresheneesz/beautinator . Пример:

var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","Word-break": "break-Word"}})
console.log(result)

Результаты в:

{ "font-size": "26px",
  "font-family": "'Open Sans', sans-serif",
  color: "white", overflow: "hidden",
  padding: "4px 4px 4px 8px",
  Text: { display: "block", width: "100%",
          "text-align": "center", "padding-left": "2px",
          "Word-break": "break-Word"
  }
}

Это даже работает, если в вашем объекте есть функции.

1
B T

Простой способ показать содержимое объекта - использовать console.log, как показано ниже

console.log("Object contents are ", obj);

Обратите внимание, что я не использую «+» для объединения объекта. Если я использую «+», я получу строковое представление только для объекта, что-то вроде [Object object].

0
Vikram

Я предпочитаю использовать console.table для получения четкого формата объекта, поэтому представьте, что у вас есть этот объект:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

И вы увидите аккуратную и удобочитаемую таблицу, подобную приведенной ниже:  console.table

0
Alireza

Попробуй это:

var object = this.window;
console.log(object,'this is window object');

Результат:

 enter image description here

0
Elshan

Он не будет работать в браузере, и вам может понадобиться это только в том случае, если вы хотите получить действительное представление JS для вашего объекта, а не JSON. Он просто запускает встроенную оценку узла 

var execSync = require('child_process').execSync

const objectToSource = (obj) =>
  execSync('node -e \'console.log(JSON.parse(`' + JSON.stringify(obj) + '`))\'', { encoding: 'utf8' })

console.log(objectToSource({ a: 1 }))
0
Yuriy Naydenov