U prosjeku radim s JSON podacima 18 puta tjedno. I još uvijek moram potražiti određene načine kako njima manipulirati gotovo svaki put. Što ako postoji vrhunski vodič koji bi vam uvijek mogao dati odgovor?
U ovom ću vam članku pokazati osnove rada s nizovima objekata u JavaScript-u.
Ako ste ikad radili s JSON strukturom, radili ste s JavaScript objektima. Sasvim doslovno. JSON je skraćenica od JavaScript Object Notation.
Stvaranje objekta jednostavno je poput ovog:
{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } Ovaj objekt predstavlja automobil. Automobila može biti mnogo vrsta i boja, svaki objekt tada predstavlja određeni automobil.
Sad većinu vremena ovakve podatke dobivate od vanjske usluge. Ali ponekad morate ručno stvoriti objekte i njihove nizove. Kao i kad sam stvarao ovu e-trgovinu:
Uzimajući u obzir da svaka stavka popisa kategorija izgleda ovako u HTML-u:
Nisam želio da se ovaj kôd ponovi 12 puta, što bi ga učinilo neodrživim.
Stvaranje niza objekata
No, vratimo se automobilima. Pogledajmo ovaj niz automobila:
To možemo prikazati kao niz na ovaj način:
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 }, { ... }, ... ] Nizovi predmeta ne ostaju cijelo vrijeme isti. Gotovo uvijek moramo njima manipulirati. Pa pogledajmo kako možemo dodati objekte u već postojeći niz.
Na početku dodajte novi objekt - Array.unshift
Da biste dodali objekt na prvom mjestu, upotrijebite Array.unshift.
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); Na kraju dodajte novi objekt - Array.push
Za dodavanje objekta na posljednjem mjestu koristite Array.push.
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.push(car); U sredinu dodajte novi objekt - Array.splice
Da biste dodali objekt u sredinu, upotrijebite Array.splice. Ova je funkcija vrlo korisna jer može ukloniti i stavke. Pazite na njegove parametre:
Array.splice( {index where to start}, {how many items to remove}, {items to add} ); Dakle, ako želimo dodati crveni Volkswagen Cabrio na petu poziciju, koristili bismo:
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.splice(4, 0, car); Prelistavanje niza objekata
Dopustite mi da vam postavim pitanje ovdje: Zašto želite petlju kroz niz objekata? Razlog zbog kojeg tražim je taj što petlja gotovo nikada nije primarni uzrok onoga što želimo postići.
JavaScript nudi mnoge funkcije koje mogu riješiti vaš problem bez stvarne implementacije logike u opći ciklus. Pogledajmo.
Pronađite objekt u nizu prema njegovim vrijednostima - Array.find
Recimo da želimo pronaći automobil koji je crvene boje. Možemo koristiti funkciju Array.find.
let car = cars.find(car => car.color === "red"); Ova funkcija vraća prvi odgovarajući element:
console.log(car); // output: // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // } Također je moguće pretraživati više vrijednosti:
let car = cars.find(car => car.color === "red" && car.type === "cabrio");
U tom ćemo slučaju dobiti zadnji automobil s popisa.
Dohvatite više predmeta iz niza koji se podudaraju s uvjetom - Array.filter
Array.findFunkcija vraća samo jedan objekt. Ako želimo dobiti sve crvene automobile, moramo koristiti 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 // } // ] Transformacija objekata niza - Array.map
To je nešto što nam vrlo često treba. Pretvorite niz objekata u niz različitih objekata. To je posao za Array.map. Recimo da svoje automobile želimo razvrstati u tri skupine na temelju njihove veličine.
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'] Također je moguće stvoriti novi objekt ako nam treba više vrijednosti:
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' }, // ... // ] Dodajte svojstvo svakom objektu niza - 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 :-)