JavaScript Відображення об’єктів
Як відображати об’єкти JavaScript?
Відображення об’єкта JavaScript призведе до виведення [object Object].
Приклад
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Спробуйте самі »
Результат »
Деякі розповсюджені рішення для відображення об’єктів JavaScript:
- Відображення властивостей об’єкту по імені
- Відображення властивостей об’єкту в циклі
- Відображення об’єкту за допомогою Object.values()
- Відображення об’єкту за допомогою JSON.stringify()
Відображення властивостей об’єкту
Властивості об’єкту можуть відображатися у вигляді рядка:
Приклад
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Спробуйте самі »
Результат »
Відображення об’єкту в циклі
Властивості об’єкту можна збирати в циклі:
Приклад
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Спробуйте самі »
Ви маєте використовувати person[x] в циклі.
person.x не буде працювати (оскільки x - змінна).
Використання Object.values()
Будь-який об’єкт JavaScript можна конвертувати в масив за допомогою Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray тепер представляє собою масив JavaScript, готовий до відображення:
Приклад
const person = {
name: "John",
age: 30,
city: "New York"
};
const 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():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString тепер рядок JavaScript, готовий до відображення:
Приклад
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Спробуйте самі »
Результатом будет строка, следующая за нотацией JSON:
{"name":"John","age":50,"city":"New York"}
JSON.stringify() включен в JavaScript и поддерживается всеми основными браузерами.
Рядкові дати (Рядкове перетворення дат)
JSON.stringify конвертує дати в рядки:
Приклад
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Спробуйте самі »
Рядкові функції (Рядкове перетворення функцій)
JSON.stringify не буде стрінити (перетворювати в рядки) функції:
Приклад
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Спробуйте самі »
Це можна виправити ("пофіксити"), якщо перетворити (конвертувати) функції в рядки перед перетворенням в рядок.
Приклад
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Спробуйте самі »
Рядкові масиви (Рядкове перетворення масивів)
Також можливо перетворити масиви JavaScript:
Приклад
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Спробуйте самі »
Результатом буде рядок, наступний за нотацією JSON:
["John","Peter","Sally","Jane"]
