Objetos de exibição JavaScript

Índice

    Mostrar índice

Como exibir objetos JavaScript?

A exibição de um objeto JavaScript resultará em [objeto Objeto].

Exemplo

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Displaying a JavaScript object will output [object Object]:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

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;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>

</body>
</html>

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;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

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 um array 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;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Object.values() converts an object to an array.</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = Object.values(person);
</script>

</body>
</html>

Object.values() é compatível com todos os principais navegadores desde 2016.

54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

Usando JSON.stringify()

Qualquer objeto JavaScript pode ser stringificado (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;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display properties in JSON format:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

O resultado será uma string seguindo a notação JSON:

{"nome":"John","idade":50,"cidade":"Nova York"}

JSON.stringify() está incluído no JavaScript e é compatível com todos os principais navegadores.

Stringificar 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;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will convert dates into strings:</p>

<p id="demo"></p>

<script>
var person = {
  name: "John",
  today: new Date()
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Funções Stringify

JSON.stringify não restringirá funções:

Exemplo

const person = {
  name: "John",
  age: function () {return 30;}
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will not stringify functions:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

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;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Display Objects</h2>
<p>JSON.stringify will not stringify functions.</p>
<p>You have to convert functions to strings first:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Matrizes Stringify

Também é possível restringir arrays JavaScript:

Exemplo

const arr = ["John", "Peter", "Sally", "Jane"];

let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<p>JSON.stringify can stringify arrays:</p>

<p id="demo"></p>

<script>
const arr = ["John", "Peter", "Sally", "Jane"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
</script>

</body>
</html>

O resultado será uma string seguindo a notação JSON:

["John","Peter","Sally","Jane"]