Как отобразить объект JavaScript?
Как отобразить содержимое объекта JavaScript в строковом формате, как это происходит при использовании функции alert
для переменной?
Мне нужно, чтобы объект отображался в том же отформатированном виде, как при вызове alert
.
5 ответ(ов)
Вот перевод вашего кода и пояснений на русский язык в стиле ответа на StackOverflow:
Простое отображение
Собирает прямые свойства и их значения. Не включает объекты внутри объектов.
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
console.log(output);
Иерархическое отображение
Более полный пример включает объекты внутри объектов. Логика немного сложна, так как некоторые версии Javascript рассматривают массивы и null как объекты. Этот код также отображает функции в большинстве браузеров.
const order = {Apple: 12, Banana: 4, Watermelon: 1, Orange:8, Grape: {Muscat: 20}, Summary: [12,4,1,8,20], Pack: false, Null: null};
function objectAsString(obj) {
var output = '';
for (var property in obj) {
if(obj.hasOwnProperty(property) && typeof obj[property] !== 'function') {
var value = obj[property];
if(typeof value === 'object' && !Array.isArray(value) && value !== null) {
value = '{' + objectAsString(value) + '}';
}
output += property + ': ' + value +'; ';
}
}
return output;
}
console.log(objectAsString(order));
Иерархическое отображение для браузеров после 2015 года
const order = {Apple: 12, Banana: 4, Watermelon: 1, Orange:8, Grape: {Muscat: 20}, Summary: [12,4,1,8,20], Pack: false, Null: null};
function objectAsString(obj) {
return Object.keys(obj)
.map(property => {
const value = obj[property];
if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
return `${property}: {${objectAsString(value)}}`;
} else {
return `${property}: ${value}`;
}
})
.join('; ');
}
console.log(objectAsString(order));
// Apple: 12; Banana: 4; Watermelon: 1; Orange: 8; Grape: {Muscat: 20; }; Summary: 12,4,1,8,20; Pack: false; Null: null;
Если вы хотите исключить функции, вы можете вставить эту строку перед .map
:
.filter(property => typeof obj[property] !== 'function')
Таким образом, вы сможете получить строковое представление объекта, избегая отображения функций.
Попробуйте это:
console.log(JSON.stringify(obj))
Это выведет строковое представление объекта. Вместо [object]
вы получите содержимое объекта.
Если вы хотите использовать alert
для вывода вашего объекта, вы можете сделать это следующим образом:
alert("myObject is " + JSON.stringify(myObject));
Это должно вывести каждое свойство и его соответствующее значение в строковом формате. Обратите внимание, что JSON.stringify()
преобразует ваш объект в строку JSON, что позволяет вам увидеть его структуру и значения. Если вам нужно более читабельное отображение, можете использовать второй параметр JSON.stringify()
для форматирования:
alert("myObject is " + JSON.stringify(myObject, null, 2));
Это добавит отступы и сделает вывод более понятным.
Вы можете использовать следующую функцию print
, чтобы рекурсивно вывести свойства объекта в виде строки, где каждому свойству соответствует его значение. Если значение свойства является строкой, оно будет отображено в формате ключ: значение;
, а если это объект, функция рекурсивно обрабатывает его, добавляя фигурные скобки.
Вот реализация функции:
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;
}
Пример использования:
В данном примере создается объект myObject
, который содержит несколько свойств, включая вложенный объект contact
. С помощью jQuery данный объект передается в функцию print
, и результат добавляется в тело документа.
var myObject = {
name: 'Wilson Page',
contact: {
email: '[email protected]',
tel: '123456789'
}
}
$('body').append(print(myObject));
Примечание:
Функция print
будет корректно обрабатывать такие ситуации, как вложенные объекты. Для каждого свойства будет создан отдельный блок с названием и значением. Вы можете использовать jsFiddle для тестирования этого кода в браузере.
Если у вас есть дополнительные вопросы или требуется пояснить функционал, не стесняйтесь спрашивать!
Вы можете просто использовать
JSON.stringify(obj);
Пример:
var args_string = JSON.stringify(obj);
console.log(args_string);
Или
alert(args_string);
Также обратите внимание, что в JavaScript функции считаются объектами.
Дополнительно:
На самом деле, вы можете присваивать новые свойства, как показано ниже, и затем получить к ним доступ через console.log
или отобразить их в alert
:
foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);
Длина объекта в JavaScript
Как правильно клонировать объект в JavaScript?
Преобразование данных формы в объект JavaScript с помощью jQuery
Преобразование объекта в строку
Поиск объекта в массиве объектов JavaScript с совпадающим значением