Как отобразить JavaScript объекты?
Отображение JavaScript объекта приведет к выводу [object Object].
var person = {name:"Щипунов", age:30, city:"Пермь"};
document.getElementById("demo").innerHTML = person;
Попробуйте сами »
Вот некоторые распространенные решения для отображения JavaScript объектов:
- Отображение свойств объекта по имени
- Отображение свойств объекта в цикле
- Отображение объекта с помощью Object.values()
- Отображение объекта с помощью JSON.stringify()
Отображение свойств объекта
Свойства объекта можно отобразить в виде строки:
var person = {name:"Щипунов", age:30, city:"Пермь"};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Попробуйте сами »
Отображение свойств объекта в цикле
Свойства объекта можно собрать с помощью цикла:
var x, txt = "";
var person = {name:"Щипунов", age:30, city:"Пермь"};
for (x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Попробуйте сами »
Вы должны использовать в цикле person[x].
А не person.x он не будет работать (потому что x - переменная).
Использование Object.values()
Любой JavaScript объект можно преобразовать в массив, используя метод Object.values():
var person = {name:"Щипунов", age:30, city:"Пермь"};
var myArray = Object.values(person);
Переменная myArray, теперь представляет собой как JavaScript массив, готовый к отображению:
var person = {name:"Щипунов", age:50, city:"Пермь"};
var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Попробуйте сами »
Метод Object.values() поддерживается во всех основных браузерах с 2016 года.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Использование JSON.stringify()
Любой JavaScript объект можно преобразовать в строку с помощью JavaScript функции JSON.stringify():
var person = {name:"Щипунов", age:30, city:"Пермь"};
var myString = JSON.stringify(person);
Переменная myString, теперь является JavaScript строкой, готовой к отображению:
var person = {name:"Щипунов", age:30, city: "Пермь"};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Попробуйте сами »
Результатом будет строка в формате JSON:
{"name":"Щипунов","age":50, "city":"Пермь"}
Метод JSON.stringify() включен в JavaScript и поддерживается всеми основными браузерами.
| Да | 8.0 | 3.5 | 4.0 | 10.5 |
Строка даты
Метод JSON.stringify преобразует даты в строки:
var person = {name:"Щипунов", today:new Date()};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Попробуйте сами »
Строка функции
Метод JSON.stringify не будет связывать функции:
var person = {name:"Щипунов", age:function () {return 30;}};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Попробуйте сами »
Это можно "исправить", если перед преобразованием функций в строки вы преобразовываете их в строки.
var person = {name:"Щипунов", age:function () {return 30;}};
person.age = person.age.toString();
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Попробуйте сами »
Строка массива
Также возможно структурировать JavaScript массивы:
var arr = ["Андрей", "Татьяна", "Кристина", "Тимур"];
var myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Попробуйте сами »
Результатом будет строка в формате JSON:
["Андрей","Татьяна","Кристина","Тимур"]