Objets d'affichage JavaScript

Table des matières

    Afficher la table des matières

Comment afficher les objets JavaScript ?

L'affichage d'un objet JavaScript affichera [object Object].

Exemple

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

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

Essayez-le vous-même →

<!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>

Certaines solutions courantes pour afficher les objets JavaScript sont :

  • Affichage des propriétés de l'objet par nom
  • Afficher les propriétés de l'objet dans une boucle
  • Affichage de l'objet à l'aide de Object.values()
  • Affichage de l'objet à l'aide de JSON.stringify()

Affichage des propriétés d'un objet

Les propriétés d'un objet peuvent être affichées sous forme de chaîne :

Exemple

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

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

Essayez-le vous-même →

<!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>

Afficher l'objet dans une boucle

Les propriétés d'un objet peuvent être collectées dans une boucle :

Exemple

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

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

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

Essayez-le vous-même →

<!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>

Vous devez utiliser person[x] dans la boucle.

person.x ne fonctionnera pas (car x est une variable).

Utilisation d'Object.values()

Tout objet JavaScript peut être converti en tableau en utilisant Object.values() :

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

const myArray = Object.values(person);

myArray est maintenant un tableau JavaScript, prêt à être affiché :

Exemple

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

const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Essayez-le vous-même →

<!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() est pris en charge dans tous les principaux navigateurs depuis 2016.

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

Utiliser JSON.stringify()

Tout objet JavaScript peut être stringifié (converti en chaîne) avec la fonction JavaScript JSON.stringify() :

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

let myString = JSON.stringify(person);

myString est maintenant une chaîne JavaScript, prête à être affichée :

Exemple

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

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

Essayez-le vous-même →

<!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>

Le résultat sera une chaîne suivant la notation JSON :

{"name": "John", "age": 50, "city": "New York"}

JSON.stringify() est inclus dans JavaScript et pris en charge dans tous les principaux navigateurs.

Stringifier les dates

JSON.stringify convertit les dates en chaînes :

Exemple

const person = {
  name: "John",
  today: new Date()
};

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

Essayez-le vous-même →

<!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>

Fonctions de stringification

JSON.stringify ne chaînera pas les fonctions :

Exemple

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

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

Essayez-le vous-même →

<!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>

Cela peut être "corrigé" si vous convertissez les fonctions en chaînes avant de les chaîner.

Exemple

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

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

Essayez-le vous-même →

<!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>

Stringifier les tableaux

Il est également possible de stringifier des tableaux JavaScript :

Exemple

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

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

Essayez-le vous-même →

<!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>

Le résultat sera une chaîne suivant la notation JSON :

["Jean", "Pierre", "Sally", "Jane"]