Objets d’affichage JavaScript
Comment afficher les objets JavaScript ?
L’affichage d’un objet JavaScript affichera [object Object].
Exemple
const personne = {
nom : “Jean”,
âge : 30 ans,
ville : “New-York”
} ;
document.getElementById(“démo”).innerHTML = personne ;
Essayez-le vous-même »
Certaines solutions courantes pour afficher les objets JavaScript sont :
- Affichage des propriétés de l’objet par nom
- Affichage des 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 personne = {
nom : “Jean”,
âge : 30 ans,
ville : “New-York”
} ;
document.getElementById(“démo”).innerHTML =
person.name + “,” + person.age + “,” + person.city ;
Essayez-le vous-même »
Affichage de l’objet dans une boucle
Les propriétés d’un objet peuvent être collectées dans une boucle :
Exemple
const personne = {
nom : “Jean”,
âge : 30 ans,
ville : “New-York”
} ;
laissez txt = “” ;
pour (laisser x en personne) {
txt += personne[x] + ” ” ;
} ;
document.getElementById(“démo”).innerHTML = txt;
Essayez-le vous-même »
Tu dois utiliser personne[x] dans la boucle.
personne.x ne fonctionnera pas (Parce que X est une variable).
Utilisation de Object.values()
Tout objet JavaScript peut être converti en tableau en utilisant Object.values():
const personne = {
nom : “Jean”,
âge : 30 ans,
ville : “New-York”
} ;
const myArray = Object.values(person);
myArray est maintenant un tableau JavaScript, prêt à être affiché :
Exemple
const personne = {
nom : “Jean”,
âge : 30 ans,
ville : “New-York”
} ;
const myArray = Object.values(person);
document.getElementById(“demo”).innerHTML = myArray ;
Essayez-le vous-même »
Object.values() est pris en charge dans tous les principaux navigateurs depuis 2016.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Utilisation de JSON.stringify()
Tout objet JavaScript peut être stringifié (converti en chaîne) avec la fonction JavaScript
JSON.stringify():
const personne = {
nom : “Jean”,
âge : 30 ans,
ville : “New-York”
} ;
laissez myString = JSON.stringify(person);
myString est maintenant une chaîne JavaScript, prête à être affichée :
Exemple
const personne = {
nom : “Jean”,
âge : 30 ans,
ville : “New-York”
} ;
laissez myString = JSON.stringify(person);
document.getElementById(“demo”).innerHTML = myString;
Essayez-le vous-même »
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.
Chaîner les dates
JSON.stringify convertit les dates en chaînes :
Exemple
const personne = {
nom : “Jean”,
aujourd’hui : nouvelle date()
} ;
laissez myString = JSON.stringify(person);
document.getElementById(“demo”).innerHTML = myString;
Essayez-le vous-même »
Fonctions de chaîne
JSON.stringify ne chaînera pas les fonctions :
Exemple
const personne = {
nom : “Jean”,
âge : fonction () {retour 30 ;}
} ;
laissez myString = JSON.stringify(person);
document.getElementById(“demo”).innerHTML = myString;
Essayez-le vous-même »
Cela peut être “réparé” si vous convertissez les fonctions en chaînes avant de les transformer en chaînes.
Exemple
const personne = {
nom : “Jean”,
âge : fonction () {retour 30 ;}
} ;
personne.age = personne.age.toString();
laissez myString = JSON.stringify(person);
document.getElementById(“demo”).innerHTML = myString;
Essayez-le vous-même »
Stringifier les tableaux
Il est également possible de stringifier des tableaux JavaScript :
Exemple
const arr = [“John”, “Peter”, “Sally”, “Jane”];
laissez myString = JSON.stringify(arr);
document.getElementById(“demo”).innerHTML = myString;
Essayez-le vous-même »
Le résultat sera une chaîne suivant la notation JSON :
[“John”,”Peter”,”Sally”,”Jane”]
#Objets #daffichage #JavaScript
