Convertir un objet JSON en tableau JavaScript

Shraddha Paghdar 12 octobre 2023
  1. Convertir un objet JSON en un tableau en JavaScript à l’aide de la boucle for...in
  2. Convertir un objet JSON en un tableau en JavaScript à l’aide de la boucle Object.entries()
Convertir un objet JSON en tableau JavaScript

Comme dans de nombreux autres langages de programmation, les objets en JavaScript peuvent être comparés à des objets réels. En JavaScript, un objet est une entité autonome avec des propriétés et un type.

Comparez-le à une tasse, par exemple. Une voiture est un objet avec des propriétés. Une voiture a une couleur, un design, un numéro de modèle, une marque, etc. De même, les objets JavaScript peuvent avoir des propriétés qui définissent leurs caractéristiques.

Les tableaux sont des types spéciaux d’objets dont les clés sont prédéfinies sous forme numérique. Tout objet Javascript peut être converti en tableau. Les tableaux doivent utiliser des entiers au lieu de chaînes comme index d’éléments.

Dans cet article, nous allons apprendre à convertir un objet JSON en tableau.

Convertir un objet JSON en un tableau en JavaScript à l’aide de la boucle for...in

Pour convertir un objet en tableau, vous pouvez utiliser la boucle for...in en JavaScript. Il parcourt toutes les propriétés énumérables d’un objet codées en chaîne, y compris les propriétés énumérables héritées. Par exemple, créons un objet avec deux propriétés et convertissons-le en un tableau en utilisant la boucle for...in. Voir le code ci-dessous.

Syntaxe:

for (variable in object) {
  statement
}

Cette fonction itère l'objet. La variable se voit attribuer un nom de propriété différent à chaque itération. Cette méthode extrait uniquement les propriétés énumérables d’un objet. Pour plus d’informations, lisez la documentation de la méthode for...in.

const object = {
  1: 'Hello',
  2: 'World'
};
const array = [];

for (var i in object) {
  array.push([i, object[i]]);
}
console.log(array)

Dans l’exemple ci-dessus, nous avons défini deux propriétés d’un objet 1 et 2. Lorsque vous parcourez l’objet, toutes les propriétés de l’objet sont vérifiées et la clé, ainsi que la valeur, sont transmises à un tableau. Lorsque vous exécutez le code ci-dessus dans n’importe quel navigateur, il imprimera quelque chose comme ça.

Production :

[["1", "Hello"], ["2", "World"]]

Convertir un objet JSON en un tableau en JavaScript à l’aide de la boucle Object.entries()

La méthode Object.entries() renvoie un tableau de paires de propriétés énumérables chaîne-clé spécifiques à un objet donné. Elle correspond à une itération avec une boucle for...in. La seule différence est qu’une boucle for...in répertorie également les propriétés de la chaîne prototype.

Object.entries() renvoie le tableau dans le même ordre que celui fourni par une boucle for...in.

Syntaxe

Object.entries(obj);

La méthode entries() prend un objet comme paramètre dont les propres paires de propriétés énumérables à clé de chaîne sont renvoyées. Il renvoie un tableau des propres paires de propriétés énumérables de l’objet donné. Object.entries() renvoie un tableau dont les éléments sont des paires de propriétés clés de chaîne énumérables dans un objet.

Pour plus d’informations, lisez la documentation de la méthode Object.entries().

const object = {
  1: 'Hello',
  2: 'World'
};

const array = []

    for (const [key, value] of Object.entries(object)) {
  array.push([`${key}`, `${value}`]);
}
console.log(array)

Dans l’exemple ci-dessus, nous avons défini les deux propriétés d’un tableau. Lorsque vous parcourez l’objet à l’aide d’entrées, il vous donne une clé et une propriété à pousser vers un tableau. Lorsque vous exécutez le code ci-dessus dans n’importe quel navigateur, il imprimera quelque chose comme ça.

Production :

[["1", "Hello"], ["2", "World"]]
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

Article connexe - JavaScript JSON

Article connexe - JavaScript Object