21

Как отобразить объект JavaScript?

12

Как отобразить содержимое объекта JavaScript в строковом формате, как это происходит при использовании функции alert для переменной?

Мне нужно, чтобы объект отображался в том же отформатированном виде, как при вызове alert.

5 ответ(ов)

4

Вот перевод вашего кода и пояснений на русский язык в стиле ответа на 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')

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

1

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

console.log(JSON.stringify(obj))

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

0

Если вы хотите использовать alert для вывода вашего объекта, вы можете сделать это следующим образом:

alert("myObject is " + JSON.stringify(myObject));

Это должно вывести каждое свойство и его соответствующее значение в строковом формате. Обратите внимание, что JSON.stringify() преобразует ваш объект в строку JSON, что позволяет вам увидеть его структуру и значения. Если вам нужно более читабельное отображение, можете использовать второй параметр JSON.stringify() для форматирования:

alert("myObject is " + JSON.stringify(myObject, null, 2));

Это добавит отступы и сделает вывод более понятным.

0

Вы можете использовать следующую функцию 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 для тестирования этого кода в браузере.

Если у вас есть дополнительные вопросы или требуется пояснить функционал, не стесняйтесь спрашивать!

0

Вы можете просто использовать

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);
Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь