En moyenne, je travaille avec des données JSON 18 fois par semaine. Et j'ai encore besoin de chercher sur Google des moyens spécifiques de les manipuler presque à chaque fois. Et s'il y avait un guide ultime qui pourrait toujours vous donner la réponse?
Dans cet article, je vais vous montrer les bases de l'utilisation de tableaux d'objets en JavaScript.
Si vous avez déjà travaillé avec une structure JSON, vous avez travaillé avec des objets JavaScript. Littéralement. JSON signifie JavaScript Object Notation.
Créer un objet est aussi simple que ceci:
{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } Cet objet représente une voiture. Il peut y avoir plusieurs types et couleurs de voitures, chaque objet représente alors une voiture spécifique.
Désormais, la plupart du temps, vous obtenez des données comme celles-ci à partir d'un service externe. Mais parfois, vous devez créer manuellement des objets et leurs tableaux. Comme je l'ai fait lors de la création de cette e-boutique:
Considérant que chaque élément de la liste de catégories ressemble à ceci en HTML:
Je ne voulais pas que ce code soit répété 12 fois, ce qui le rendrait impossible à maintenir.
Créer un tableau d'objets
Mais revenons aux voitures. Jetons un coup d'œil à cet ensemble de voitures:
Nous pouvons le représenter comme un tableau de cette façon:
let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ] Les tableaux d'objets ne restent pas les mêmes tout le temps. Nous devons presque toujours les manipuler. Voyons donc comment nous pouvons ajouter des objets à un tableau déjà existant.
Ajouter un nouvel objet au début - Array.unshift
Pour ajouter un objet à la première position, utilisez Array.unshift.
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); Ajouter un nouvel objet à la fin - Array.push
Pour ajouter un objet à la dernière position, utilisez Array.push.
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.push(car); Ajouter un nouvel objet au milieu - Array.splice
Pour ajouter un objet au milieu, utilisez Array.splice. Cette fonction est très pratique car elle peut également supprimer des éléments. Attention à ses paramètres:
Array.splice( {index where to start}, {how many items to remove}, {items to add} ); Donc, si nous voulons ajouter la Volkswagen Cabrio rouge en cinquième position, nous utiliserons:
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.splice(4, 0, car); Faire une boucle sur un tableau d'objets
Permettez-moi de vous poser une question ici: pourquoi voulez-vous parcourir un tableau d'objets? La raison pour laquelle je pose la question est que la boucle n'est presque jamais la principale cause de ce que nous voulons réaliser.
JavaScript fournit de nombreuses fonctions qui peuvent résoudre votre problème sans implémenter réellement la logique dans un cycle général. Nous allons jeter un coup d'oeil.
Rechercher un objet dans un tableau par ses valeurs - Array.find
Disons que nous voulons trouver une voiture rouge. Nous pouvons utiliser la fonction Array.find.
let car = cars.find(car => car.color === "red"); Cette fonction renvoie le premier élément correspondant:
console.log(car); // output: // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // } Il est également possible de rechercher plusieurs valeurs:
let car = cars.find(car => car.color === "red" && car.type === "cabrio");
Dans ce cas, nous obtiendrons la dernière voiture de la liste.
Obtenir plusieurs éléments d'un tableau qui correspondent à une condition - Array.filter
La Array.findfonction ne renvoie qu'un seul objet. Si nous voulons obtenir toutes les voitures rouges, nous devons utiliser Array.filter.
let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // { // color: 'red', // type: 'cabrio', // registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 2 // } // ] Transformer les objets d'un tableau - Array.map
C'est quelque chose dont nous avons besoin très souvent. Transformez un tableau d'objets en un tableau d'objets différents. C'est un travail pour Array.map. Disons que nous voulons classer nos voitures en trois groupes en fonction de leur taille.
let sizes = cars.map(car => { if (car.capacity <= 3){ return "small"; } if (car.capacity <= 5){ return "medium"; } return "large"; }); console.log(sizes); // output: // ['large','medium','medium', ..., 'small'] Il est également possible de créer un nouvel objet si nous avons besoin de plus de valeurs:
let carsProperties = cars.map(car => { let properties = { "capacity": car.capacity, "size": "large" }; if (car.capacity <= 5){ properties['size'] = "medium"; } if (car.capacity <= 3){ properties['size'] = "small"; } return properties; }); console.log(carsProperties); // output: // [ // { capacity: 7, size: 'large' }, // { capacity: 5, size: 'medium' }, // { capacity: 5, size: 'medium' }, // { capacity: 2, size: 'small' }, // ... // ] Ajouter une propriété à chaque objet d'un tableau - Array.forEach
But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.
cars.forEach(car => { car['size'] = "large"; if (car.capacity <= 5){ car['size'] = "medium"; } if (car.capacity <= 3){ car['size'] = "small"; } }); Sort an array by a property - Array.sort
When we're done with transforming the objects, we usually need to sort them one way or another.
Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.
Let's say we want to sort the cars based on their capacity in descending order.
let sortedCars = cars.sort((c1, c2) => (c1.capacity c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // { // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // }, // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // ... // ] The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?
Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.
Checking if objects in array fulfill a condition - Array.every, Array.includes
Array.every and Array.some come handy when we just need to check each object for a specific condition.
Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?
cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.
Summary
In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.
If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.
Or get in touch with me and I will prepare another article :-)