Convertir un objet JSON en tableau JavaScript

JSON est un format texte. Si vos données sont du texte JSON, analysez-les avec JSON.parse() pour obtenir une valeur JavaScript avant de sélectionner des propriétés ou de construire un tableau. Si vous disposez déjà d’un objet JavaScript, passez l’analyse et choisissez la forme de tableau dont vous avez besoin : des paires clé-valeur, uniquement les valeurs ou une sélection personnalisée. Ces opérations créent des tableaux à partir des propriétés ; elles ne convertissent pas automatiquement n’importe quel objet en tableau.

Les tableaux JavaScript sont des objets contenant des éléments indexés. Les positions d’un tableau commencent à zéro, tandis que les noms de propriétés renvoyés par les méthodes d’énumération d’objets sont des chaînes. Par exemple, les clés d’un objet qui ressemblent à des nombres restent des chaînes dans les paires renvoyées.

Convertir du texte JSON en objet JavaScript

Transmettez une chaîne JSON valide à JSON.parse(). Selon le texte, le résultat peut être un objet, un tableau ou une autre valeur JSON. L’exemple analyse un objet, puis utilise ses champs pour créer un tableau de paires.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const jsonText = '{"name":"Ada","role":"engineer"}';
const person = JSON.parse(jsonText);
const entries = Object.entries(person);
console.log(entries);

[ [ 'name', 'Ada' ], [ 'role', 'engineer' ] ]

Si le texte d’entrée n’est pas un JSON valide, l’analyse déclenche une SyntaxError ; validez ou traitez les données au moment où elles entrent dans votre application. N’appelez pas JSON.parse() sur une valeur qui est déjà un objet. Pour en savoir plus, consultez la référence de JSON.parse().

Convertir un objet en paires clé-valeur avec Object.entries()

Utilisez Object.entries(object) lorsque chaque résultat doit contenir à la fois le nom d’une propriété et sa valeur. La méthode renvoie un tableau de tableaux à deux éléments, tels que [key, value]. Elle inclut les propriétés propres de l’objet, énumérables et dont les clés sont des chaînes. Elle n’inclut ni les propriétés héritées ni celles dont les clés sont des symboles. Les noms de propriétés qui ressemblent à des nombres sont des chaînes dans les paires obtenues.

Cette méthode est utile lorsqu’une opération ultérieure a besoin des deux éléments, par exemple pour afficher des libellés avec leurs valeurs ou transformer chaque paire. Pour une explication connexe des tableaux d’entrées, consultez JavaScript array entries.

Convertir un objet en tableau de valeurs avec Object.values()

Utilisez Object.values(object) lorsque les clés ne sont pas nécessaires. La méthode renvoie les valeurs des propriétés propres de l’objet, énumérables et dont les clés sont des chaînes, dans le même ordre de propriétés que Object.entries(). Le résultat est un tableau plat de valeurs, et non un tableau de paires [key, value]. Choisissez cette méthode si vous devez traiter ou afficher les valeurs seules ; utilisez Object.entries() si vous devez conserver l’association entre chaque valeur et sa clé.

Par exemple, pour un objet ayant les propriétés name et role, Object.values(object) produit un tableau contenant les valeurs du nom et du rôle. Cette description explique le fonctionnement de l’opération sans prétendre rapporter un résultat observé à l’exécution. Consultez la référence de Object.values().

Utiliser for…in pour une itération personnalisée

Une boucle for...in parcourt les propriétés énumérables dont les clés sont des chaînes, y compris les propriétés énumérables héritées par la chaîne de prototypes. Utilisez-la lorsque vous devez appliquer une logique personnalisée pendant l’itération. Si le résultat doit contenir uniquement les propriétés propres de l’objet, vérifiez Object.hasOwn() avant d’ajouter chaque élément. Cette vérification évite de récupérer les propriétés énumérables héritées.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const object = { name: 'Ada', role: 'engineer' };
const entries = [];

for (const key in object) {
  if (Object.hasOwn(object, key)) {
    entries.push([key, object[key]]);
  }
}

console.log(entries);

[ [ 'name', 'Ada' ], [ 'role', 'engineer' ] ]

Pour les propriétés propres ainsi vérifiées, cette boucle construit des paires de la même forme générale que Object.entries(), tout en permettant de filtrer ou de transformer les éléments au fil de l’itération. Sans cette vérification, des propriétés énumérables héritées peuvent également être ajoutées. Pour une conversion standard en paires, Object.entries() est plus concise et exprime directement cette intention. Consultez la référence de for...in pour en savoir plus sur son comportement d’itération.

Choisir la forme de tableau dont vous avez besoin

Commencez par déterminer le type d’entrée : analysez le texte JSON avec JSON.parse(), mais utilisez directement un objet déjà créé. Choisissez ensuite le résultat souhaité : Object.entries() pour obtenir des paires, Object.values() pour obtenir uniquement les valeurs, ou for...in avec une vérification des propriétés propres si l’itération doit appliquer un filtrage ou une transformation personnalisés. Les deux méthodes intégrées sélectionnent les propriétés propres énumérables dont les clés sont des chaînes ; une boucle for...in sans vérification voit aussi les propriétés énumérables héritées dont les clés sont des chaînes. Aucune de ces méthodes n’inclut les propriétés dont les clés sont des symboles. Cette distinction aide à éviter les éléments inattendus et à faire correspondre le tableau obtenu aux besoins de l’étape suivante.