Як відобразити вміст об’єкта JavaScript у форматі рядка, як, наприклад, коли ми alertзмінною?

Таким же відформатованим способом я хочу відобразити об’єкт.

Якщо ви хочете надрукувати об’єкт для цілей налагодження, використовуйте код:

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

відобразиться:

Примітка. Ви повинні лише зареєструвати об'єкт. Наприклад, це не працює:

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

Примітка ' : Ви також можете використовувати коду в logметоді, тоді першим рядком виводу буде рядок, а після цього об'єкт буде надано:

console.log('My object: ', obj);

Використовуйте нативний JSON.stringifyметод. Працює з вкладеними об'єктами і всі основні браузери підтримують цей метод.

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 Reference та інші приклади.

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

Використовуйте спеціальний JSON.stringify замінник, якщо ви зіткнулися з цією помилкою Javascript

"Uncaught TypeError: Converting circular structure to JSON"

var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

console.dir(object):

Відображає інтерактивний перелік властивостей вказаного об’єкта JavaScript. Цей перелік дозволяє використовувати трикутники розкриття для вивчення вмісту дочірніх об'єктів.

Зауважте, що ця console.dir()функція нестандартна. Див. Веб-документи MDN

спробуйте це :

console.log(JSON.stringify(obj))

Це виведе друковану версію об'єкта. Тож замість [object]виводу ви отримаєте вміст об'єкта.

Ну, Firefox (завдяки @Bojangles за детальну інформацію) має Object.toSource()метод, який друкує об'єкти як JSON таfunction(){} .

Цього достатньо для більшості налагоджувальних цілей, я думаю.

Якщо ви хочете скористатись сповіщенням, щоб надрукувати об’єкт, ви можете зробити це:

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

Він повинен друкувати кожну властивість та відповідне її значення у рядковому форматі.

Якщо ви хочете бачити дані у табличному форматі, ви можете використовувати їх

console.table(obj);

Таблицю можна сортувати, якщо натиснути на стовпчик таблиці.

Ви також можете вибрати стовпці для показу:

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

Ви можете знайти більше інформації про console.table тут

У NodeJS ви можете надрукувати об'єкт за допомогою util.inspect(obj). Обов’язково вкажіть глибину, або у вас буде лише дрібний відбиток об’єкта.

Функція:

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: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

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

Приклад:

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

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

JSON.stringify(obj)

Приклад

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

Або

alert(args_string);

Також примітка у функціях javascript розглядається як об'єкти.

Як додаткова примітка:

Насправді ви можете призначити нове властивість на зразок цього та отримати доступ до console.log або відобразити його у сповіщенні

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);

Використовуй це:

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

Як було сказано раніше найкращий і найпростіший спосіб, який я знайшов

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

Щоб надрукувати повний об’єкт за допомогою 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

NB: У цих прикладах yourObj визначає об'єкт, який ви хочете вивчити.

Перш за все мій найулюбленіший, але найбільш використаний спосіб відображення предмета:

Це дефакто спосіб показу вмісту об'єкта

console.log(yourObj)

створить щось на кшталт:

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

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

Він виведе щось на зразок: (на фото вище: ключі / значення, що зберігаються в об'єкті)

Також є ця нова опція, якщо ви використовуєте ECMAScript 2016 або новішу версію:

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

Це дасть чіткий вихід: Рішення, згадане в попередній відповіді: console.log(yourObj)відображає занадто багато параметрів і не є найбільш зручним для користувача способом відображення потрібних даних . Ось чому я рекомендую проводити реєстрацію ключів, а потім значення окремо.

Далі:

console.table(yourObj)

Хтось із попередніх коментарів запропонував цей, проте він ніколи не працював для мене. Якщо це працює для когось іншого в іншому браузері чи щось таке, то кудо! Я все ще ставлю код тут для довідки! Виведе щось подібне на консоль:

(Це додано до моєї бібліотеки в GitHub )

Винахід колеса тут! Жодне з цих рішень не працювало для моєї ситуації. Отже, я швидко підкреслив відповідь Вільсона . Цей не призначений для друку на екран (за допомогою консолі, текстового поля чи іншого). Це добре працює в тих ситуаціях і працює добре, як цього вимагала ОП alert. Багато відповідей тут не звертаються, використовуючи, alertяк вимагає ОП. Так чи інакше, він форматований для транспортування даних. Ця версія, здається, повертає дуже схожий результат 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ця функція помилково трактує його як масив.

РЕДАКТУВАННЯ: Додано чек на об’єкти з нульовим значенням. Спасибі Брок Адамс

EDIT: Нижче наведена фіксована функція для друку нескінченно рекурсивних об'єктів. Це не друкується так само, як 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не передбачалося перетворення на рядок. Тому що або занадто великий, або проти політики безпеки для доступу до певних ресурсів. Якщо тільки я щось тут не зіпсував, скажіть!

Якщо ви хочете надрукувати об'єкт його повної довжини, можете використовувати

console.log (requ ('util'). інспектувати (obj, {showHidden: false, глибина: null})

Якщо ви хочете надрукувати об'єкт, перетворивши його на рядок, тоді

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

Ось спосіб це зробити:

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

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

// 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: 'wilson@hotmail.com',
        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) ); 

Я завжди користуюся console.log("object will be: ", obj, obj1). таким чином, мені не потрібно робити вирішення проблем з JSON. Всі властивості об’єкта будуть красиво розширені.

Інший спосіб відображення об'єктів у консолі - це за допомогою 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));

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

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

де objectваш об’єкт

або ви можете використовувати це в інструментах хромованого розробника, на вкладці "консоль":

console.log(object);

Припустимо об’єкт 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

Сподіваюся, що це допомагає!

Я вважаю за краще використовувати console.tableчіткий формат об'єкта, тому уявіть, що у вас є цей об'єкт:

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

І ви побачите нижче акуратну та читану таблицю:

Трохи допоміжна функція, яку я завжди використовую у своїх проектах для простої, швидкої налагодження через консоль. Натхнення, взяте від 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'); 

Ви також можете використовувати дослівну концепцію шаблону ES6 для відображення вмісту об’єкта JavaScript у строковому форматі.

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);

Я використовував метод друку pagewil, і він працював дуже добре.

ось моя трохи розширена версія з (неохайними) відступами та чіткими опорними / обмежувачами:

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

Ще одна модифікація коду pagewils ... його не виводить нічого іншого, крім рядків, і залишає порожні поля число та булеві поля, і я зафіксував помилку друку на другому типі просто в межах функції, створеної мегабосом.

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

Ось функція.

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

Він може показувати об’єкт, використовуючи відступ вкладки з читабельністю.