Objetos de exibição JavaScript
Como exibir objetos JavaScript?
A exibição de um objeto JavaScript resultará em [object Object] .
Exemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Algumas soluções comuns para exibir objetos JavaScript são:
- Exibindo as propriedades do objeto por nome
- Exibindo as propriedades do objeto em um loop
- Exibindo o objeto usando Object.values()
- Exibindo o objeto usando JSON.stringify()
Exibindo Propriedades do Objeto
As propriedades de um objeto podem ser exibidas como uma string:
Exemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Exibindo o objeto em um loop
As propriedades de um objeto podem ser coletadas em um loop:
Exemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Você deve usar person[x] no loop.
person.x não funcionará (porque x é uma variável).
Usando Object.values()
Qualquer objeto JavaScript pode ser convertido em uma matriz usando Object.values()
:
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray
agora é um array JavaScript, pronto para ser exibido:
Exemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values()
é suportado em todos os principais navegadores desde 2016.
54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Usando JSON.stringify()
Qualquer objeto JavaScript pode ser encadeado (convertido em uma string) com a função JavaScript
JSON.stringify()
:
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString
agora é uma string JavaScript, pronta para ser exibida:
Exemplo
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
O resultado será uma string seguindo a notação JSON:
{"name":"João","idade":50,"cidade":"Nova Iorque"}
JSON.stringify()
está incluído em JavaScript e suportado em todos os principais navegadores.
Stringify Datas
JSON.stringify
converte datas em strings:
Exemplo
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Funções de Stringify
JSON.stringify
não irá stringificar funções:
Exemplo
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Isso pode ser "consertado" se você converter as funções em strings antes de stringificar.
Exemplo
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Stringify Arrays
Também é possível stringify arrays JavaScript:
Exemplo
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
O resultado será uma string seguindo a notação JSON:
["John","Peter","Sally","Jane"]