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

Question

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

Тот же форматированный способ отображения объекта.

Answer 1

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

console.log("%o", obj);

Answer 2

Еще один способ отображения объектов в консоли - 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));

Answer 3

Предполагаемый объект 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

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

Answer 4

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

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

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

console.log(object);

Answer 5

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

Answer 6

Маленькая вспомогательная функция, которую я всегда использую в своих проектах для простой и быстрой отладки через консоль. Вдохновение взято из 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); выходы:

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

Answer 7

Я использовал метод печати 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;
};

Answer 8

Вот функция.

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

Может показывать объект с помощью отступа табуляции с удобочитаемостью.

Answer 9

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

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

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

Answer 10

Еще одна модификация кода pagewils ... Его не выводит ничего, кроме строк, и оставляет пустыми числовые и логические поля, и я исправил опечатку для второго типа в функции, созданной megaboss.

<code>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 += '

'; // также может быть } обратная ул; };