Comment itérer une boucle dans un tableau JSON à l'aide de JavaScript

Comment Iterer Une Boucle Dans Un Tableau Json A L Aide De Javascript



' Tableau JSON » contient une liste ordonnée d'éléments placés entre crochets et séparés par une « virgule (,) ». La liste des éléments peut être de plusieurs types de données, y compris 'objet', 'nombre', 'chaîne', 'booléen', ainsi qu'un autre tableau à l'intérieur du tableau JSON. Le 'tableau JSON' est fondamentalement le même que le tableau JavaScript. De plus, il peut être itéré comme une boucle comme le tableau JavaScript. Le processus d'itération du tableau JSON est utile pour accéder à chaque élément qui contient l'objet JSON pour effectuer des tâches spéciales sur eux.

Ce guide explique comment itérer une boucle dans un tableau JSON à l'aide de JavaScript.

Comment itérer une boucle dans un tableau JSON à l'aide de JavaScript ?

Le ' Tableau JSON ” Les valeurs sont accessibles via une boucle. Le JSON (JavaScript Object Notation) est considéré comme la meilleure technique pour transporter des données dans un format de tableau. En effet, il s'agit d'un format léger pour stocker et transférer les données requises d'un endroit à un autre.







Cette section utilise le terme couramment utilisé ' pour ” boucle pour itérer un tableau JSON en utilisant JavaScript.



Syntaxe (tableau JSON)



Déployer - nom = [ valeur1 , valeur2 , ..... valeurN ]

Ici, 'value1', 'value2' et 'valueN' font référence aux valeurs qui doivent être itérées.





Effectuons pratiquement la boucle à travers un tableau 'JSON' en JavaScript.

Code HTML



Examinons le code HTML suivant :

< h2 > Boucle à travers le tableau JSON < / h2 >
< p > Un tableau JSON contient zéro, un ou plusieurs éléments ordonnés, séparés par une virgule. < / p >
< p identifiant = 'goûter' >< / p >

Dans les lignes de code ci-dessus :

  • Le '

    tag définit un sous-titre.

  • Le '

    ” crée une déclaration de paragraphe.

  • Enfin, la balise '

    ' définit un paragraphe vide ayant pour identifiant ' goûter ” pour afficher les valeurs du tableau JSON.

Code Javascript

Ensuite, passez au code fourni ci-dessous :

< scénario >
constante Tableau JSON = '{'name':'Johnson', 'age':35, 'cars':['BMW', 'Honda', 'Corolla']}' ;
constante Obj = JSON. analyser ( Tableau JSON ) ;

laisser le texte = '' ;
pour ( laisse k = 0 ; k < Obj. voitures . longueur ; k ++ ) {
texte += Obj. voitures [ k ] + ', ' ;
}
document. getElementById ( 'goûter' ) . innerHTML = texte ;
scénario >

Dans ce bloc de code :

  • Définissez un tableau JSON nommé ' Tableau JSON ' avec un ' constante ” mot-clé ayant une liste ordonnée de valeurs.
  • Le ' Obj ” objet utilise le “ analyser () ” méthode qui convertit le texte du tableau JSON spécifié en objet JavaScript.
  • Après cela, le « texte ” La variable stocke une valeur vide.
  • Ensuite, appliquez un ' pour ' boucle pour itérer sur les propriétés de ' Obj ' concaténé avec le tableau JSON inclus contre la clé ' voiture '.
  • Aussi, associez le « longueur ” et incrémentez la boucle pour effectuer l'itération de manière appropriée.
  • Enfin, appliquez le « getElementById() ” pour accéder au paragraphe vide ajouté en utilisant son identifiant “sample”. Il affichera les valeurs du tableau JSON via le ' innerHTML ' propriété.

Sortir

La sortie affiche toutes les valeurs du tableau JSON ajouté à l'aide de la boucle 'for'.

Conclusion

' Tableaux JSON ' peut être facilement itéré en utilisant JavaScript à l'aide du ' pour ' boucle. Il s'agit d'un processus courant et généralement utilisé dans le développement Web pour récupérer les données au format JSON à partir de la base de données ou de l'API. Ce guide a expliqué une brève description pour itérer une boucle dans un tableau JSON à l'aide de JavaScript.