Utilisation d'un tableau d'objets JSON en JavaScript

1. Création d’un tableau d’objets JSON
2. Accéder à un objet à partir d’un tableau d’objets JSON
3. Itérer sur un tableau d’objets JSON
4. Ajouter un objet au tableau d’objets JSON
5. Supprimer un objet d’un tableau d’objets JSON
6. Rechercher un élément dans le tableau d’objets JSON

Un objet JSON est un simple objet JavaScript. Nous pouvons créer un tableau avec de nombreux objets JSON similaires. Contrairement aux langages comme C, C++, Java, etc., en javascript, il est facile de manipuler le tableau d’objets JSON. C’est comparable à une structure Array en C ou à un tableau d’un objet de classe en Java. Dans cet article, nous verrons comment créer un tableau d’objets JSON en itérant et en y trouvant un élément.

Création d’un tableau d’objets JSON

Nous pouvons créer un tableau d’objets JSON soit en attribuant un tableau JSON à une variable, soit en ajoutant dynamiquement des valeurs dans un tableau d’objets à l’aide de l’opérateur .push() ou en ajoutant un objet à un index du tableau en utilisant des constructions en boucle comme le boucle for ou boucle while. Référez-vous au code suivant pour mieux comprendre.

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(JSON.stringify(months));
var monthNames = ['January', 'February'];
var month = {};
var monthsArray = [];
for (let i = 0; i < 2; i++) {
  month.id = (i + 1);
  month.name = monthNames[i];
  monthsArray.push({...month});
}
console.log(JSON.stringify(monthsArray));

Production:

[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]

Dans le code ci-dessus, la variable months contient le tableau d’objets JSON attribué explicitement, tandis que le monthsArray est un tableau d’objets JSON créé en attribuant des valeurs à l’intérieur d’une boucle for. Nous utilisons la fonction de tableau .push() pour ajouter l’objet javascript généré à la fin du monthsArray. Notez que les deux tableaux affichent la même structure lorsqu’ils sont enregistrés avec l’instruction JavaScript console.log(). La fonction JSON.stringify() convertit le tableau JSON en un format de chaîne pour le rendre dans un format lisible par l’homme.

Accéder à un objet à partir d’un tableau d’objets JSON

Nous avons créé un tableau d’objets JSON. Voyons comment nous pouvons accéder à un élément de ce tableau. L’approche est la même que pour un simple tableau de chaînes ou un tableau de nombres. Nous pouvons accéder à un objet tableau en utilisant le tableau Index (qui commence à 0) et manipuler la valeur de l’objet à cet indice. Référez-vous au code suivant.

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(months[0].id);
console.log(months[0].name);
months[0].id = 3;
months[0].name = 'March';
console.log(months[0].id);
console.log(months[0].name);

Production:

1
January
3
March

Dans le code, nous avons modifié la valeur des paramètres de l’objet en accédant au premier index du tableau mois à l’aide du tableau Index. De même, nous pouvons modifier la valeur de tout autre objet du tableau en utilisant son index.

Itérer sur un tableau d’objets JSON

Nous pouvons itérer le tableau d’objets de la même manière que pour un tableau de chaînes ou un tableau de nombres. Nous pouvons utiliser une boucle for ou une boucle while pour notre propos. Nous pouvons accéder aux éléments en utilisant les indices du tableau. Nous itérons le tableau du 0e indice à la longueur du tableau. L’attribut .length renvoie également la longueur du tableau d’objets. Reportez-vous au code suivant qui montre l’itération du tableau et la valeur d’impression de chaque objet qu’il contient.

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
for (let i = 0; i < months.length; i++) {
  console.log(`${i} id:${months[i].id}, name:${months[i].name}`)
}

Production:

0 id:1, name:January
1 id:2, name:February

Ajouter un objet au tableau d’objets JSON

Nous avons créé un tableau d’objets et itéré sur eux. Voyons maintenant comment ajouter des éléments au tableau JSON. Nous pouvons utiliser la fonction .push() pour ajouter un objet JSON à la fin du tableau. La fonction .unshift() ajoute un élément au début d’un tableau JSON. Le .splice() insère un objet à un index spécifié dans un tableau. Reportez-vous au code suivant qui décrit l’utilisation de chacune de ces fonctions.

var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
months.push({'id': 4, 'name': 'April'});
console.log(JSON.stringify(months));
months.unshift({'id': 12, 'name': 'December'})
console.log(JSON.stringify(months));
months.splice(3, 0, {'id': 3, 'name': 'March'});
console.log(JSON.stringify(months));

Production:

[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]

Notez que nous pouvons utiliser la fonction .splice() pour remplacer les objets d’un tableau par des valeurs plus récentes passées en paramètres. Le premier paramètre de la méthode .splice() est l’index dans lequel on effectue les opérations. Comme deuxième paramètre, nous mentionnons le nombre d’éléments que nous souhaitons remplacer. Le dernier paramètre est la valeur que nous insérons dans le tableau.

Supprimer un objet d’un tableau d’objets JSON

Nous pouvons supprimer des éléments d’un tableau d’objets d’une manière similaire à celle des tableaux JavaScript simples. Nous pouvons utiliser la méthode .pop() de javascript pour supprimer l’élément à la fin du tableau d’objets JSON. Le .shift() supprime un objet du début du tableau d’objets JSON. La fonction .splice() supprime un élément à un index spécifié du tableau JSON. Référez-vous au code suivant.

var months = [
  {'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
  {'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
  {'id': 4, 'name': 'April'}
];
months.shift();
console.log(JSON.stringify(months));
months.pop();
console.log(JSON.stringify(months));
months.splice(1, 1);
console.log(JSON.stringify(months));

Production:

[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"}]
[{"id":1,"name":"January"},{"id":3,"name":"March"}]

Rechercher un élément dans le tableau d’objets JSON

Nous pouvons utiliser .indexOf() ou includes() pour vérifier si un élément est présent dans un simple tableau de chaînes. Mais ces méthodes ne fonctionneront pas pour un tableau d’objets. Nous pouvons utiliser certaines fonctions similaires comme .filter(), .find(), findIndex() pour vérifier si un élément est présent dans le tableau. Nous pouvons itérer manuellement le tableau et vérifier si l’élément existe à l’aide de constructions en boucle (comme les boucles for, while, etc.), mais cela peut être la dernière option à considérer, car cela conduira à un code volumineux. Les fonctions javascript intégrées telles que .filter(), .find(), findIndex() sont utiles pour rechercher des objets dans un tableau d’objets JSON. La fonction .filter() renvoie un tableau contenant les objets qui satisfont à une certaine condition, .find() renvoie l’objet qui satisfait la condition qui lui est passée en tant que fonction en ligne, findIndex() renvoie le index de l’objet s’il peut le trouver dans le tableau, sinon il renvoie -1. Par conséquent, en connaissant le type de retour des fonctions, nous pouvons concevoir la fonctionnalité de recherche dans un tableau d’objets JSON. Référez-vous au code suivant pour mieux comprendre les usages de .filter(), .find(), findIndex().

var months = [
  {'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
  {'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
  {'id': 4, 'name': 'April'}
];
(months.filter(i => i.name === 'April').length) ?
    console.log('April month found') :
    console.log('Not found');
(months.find(i => i.name === 'January') != {}) ?
    console.log('January month found') :
    console.log('Not found');
(months.findIndex(i => i.name === 'April') > -1) ?
    console.log('April month found') :
    console.log('Not found');

Production:

April month found
January month found
April month found