Objetos Visíveis JavaScript

Como exibir um objeto JavaScript?

O resultado da exibição de um objeto JavaScript será [object Object].

Exemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

Experimente por sua conta

Alguns métodos comuns para exibir objetos JavaScript são:

  • Exibir propriedades do objeto pelo nome
  • Exibir propriedades do objeto no loop
  • Exibir objeto usando Object.values()
  • Exibir objeto usando JSON.stringify()

Exibir propriedades do objeto

As propriedades do objeto podem ser exibidas como strings:

Exemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Experimente por sua conta

Exibir o objeto no loop

Você pode coletar as propriedades do objeto no loop:

Exemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

Experimente por sua conta

Você deve usar person[x] dentro de um loop.

person.x não funcionará (porque x é uma variável).

usando Object.values()

usando Object.values(), qualquer objeto JavaScript pode ser convertido em um array:

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray Agora é um array do JavaScript, pode ser exibido:

Exemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Experimente por sua conta

Desde 2016, todos os navegadores principais suportam Object.values().

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

usando JSON.stringify()

Qualquer objeto JavaScript pode usar a função JavaScript JSON.stringify() Realizar a stringificação (converter para string):

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString Agora é uma string do JavaScript, pode ser exibida:

Exemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Experimente por sua conta

O resultado será uma string que segue o formato JSON:

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() Incluída no JavaScript, todos os navegadores populares suportam.

Stringificação da data

JSON.stringify Converter a data para uma string:

Exemplo

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Experimente por sua conta

Stringificação de Função

JSON.stringify Não será stringificado:

Exemplo

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Experimente por sua conta

Se converter a função em string antes da stringificação, isso pode ser "fixo".

Exemplo

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Experimente por sua conta

Stringificação de Array

Também é possível stringificar arrays JavaScript:

Exemplo

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Experimente por sua conta

O resultado será uma string que segue o formato JSON:

["Bill","Steve","Elon","David"]