Objets affichés JavaScript

Comment afficher un objet JavaScript ?

Afficher un objet JavaScript produit le [object Object].

Exemple

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

Essayez-le vous-même

Des solutions courantes pour afficher des objets JavaScript sont :

  • Afficher les propriétés de l'objet par nom
  • Afficher les propriétés de l'objet en boucle
  • Afficher l'objet en utilisant Object.values()
  • Afficher l'objet en utilisant JSON.stringify()

Afficher les propriétés de l'objet

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

Exemple

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

Essayez-le vous-même

Afficher l'objet dans la boucle

Les propriétés de l'objet peuvent être collectées dans la boucle :

Exemple

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

Essayez-le vous-même

Vous devez utiliser person[x] dans la boucle.

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

Utiliser Object.values()

En utilisant Object.values()Tous les objets JavaScript peuvent être convertis en tableau :

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

myArray Il est maintenant un tableau JavaScript, il peut être affiché :

Exemple

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

Essayez-le vous-même

Depuis 2016, tous les principaux navigateurs le supportent Object.values().

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

Utiliser JSON.stringify()

Tous les objets JavaScript peuvent utiliser la fonction JavaScript JSON.stringify() Procéder à la chaîne de caractères (conversion en chaîne) :

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

myString Il est maintenant une chaîne de caractères JavaScript, il peut être affiché :

Exemple

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

Essayez-le vous-même

Le résultat sera une chaîne qui suit les règles de balisage JSON :

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

JSON.stringify() Inclus dans JavaScript, tous les navigateurs populaires le supportent.

Chaine de caractères de date

JSON.stringify Convertir une date en chaîne de caractères :

Exemple

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

Essayez-le vous-même

Sérialisation de fonction

JSON.stringify La sérialisation des fonctions ne sera pas effectuée :

Exemple

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

Essayez-le vous-même

Si vous convertissez la fonction en chaîne avant la sérialisation, cela peut être "fixe".

Exemple

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

Essayez-le vous-même

Sérialisation de tableau

Il est également possible de sérialiser un tableau JavaScript :

Exemple

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

Essayez-le vous-même

Le résultat sera une chaîne qui suit les règles de balisage JSON :

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