On average I work with JSON data 18 times a week. And I still need to google for specific ways to manipulate them almost every time. What if there was an ultimate guide that could always give you the answer? Show
In this article, I'll show you the basics of working with object arrays in JavaScript. If you ever worked with a JSON structure, you've worked with JavaScript objects. Quite literally. JSON stands for JavaScript Object Notation. Creating an object is as simple as this:
This object represents a car. There can be many types and colors of cars, each object then represents a specific car. Now, most of the time you get data like this from an external service. But sometimes you need to create objects and their arrays manually. Like I did when I was creating this e-shop: Considering each category list item looks like this in HTML: I didn't want to have this code repeated 12 times, which would make it unmaintainable. Creating an array of objectsBut let's get back to cars. Let's take a look at this set of cars: We can represent it as an array this way:
Arrays of objects don't stay the same all the time. We almost always need to manipulate them. So let's take a look at how we can add objects to an already existing array. Add a new object at the start - Array.unshiftTo add an object at the first position, use
Add a new object at the end - Array.pushTo add an object at the last position, use
Add a new object in the middle - Array.spliceTo add an object in the middle, use
So if we want to add the red Volkswagen Cabrio on the fifth position, we'd use:
Looping through an array of objectsLet me ask you a question here: Why do you want to loop through an array of objects? The reason I'm asking is that the looping is almost never the primary cause of what we want to achieve. JavaScript provides many functions that can solve your problem without actually implementing the logic in a general cycle. Let's take a look. Find an object in an array by its values - Array.findLet's say we want to find a car that is red. We can use the function
This function returns the first matching element:
It's also possible to search for multiple values:
In that case we'll get the last car in the list. Get multiple items from an array that match a condition - Array.filterThe
Transform objects of an array - Array.mapThis is something we need very often. Transform an array of objects into an array of different objects. That's a job for
It's also possible to create a new object if we need more values:
Add a property to every object of an array - Array.forEachBut what if we want the car size
too? In that case we can enhance the object for a new property
Sort an array by a property - Array.sortWhen 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 Let's say we want to sort the cars based on their capacity in descending order.
The 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
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?
You may remember the function SummaryIn 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 :-) Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started Can an object have an array?You can use Array inside object JavaScript. Not even Array anything inside JavaScript objects, including other objects, functions, etc can define. Array is an object, and you can have an object as a property of another object.
How do you add multiple objects to an array?push() To add multiple objects at the end of an array, you can repeatedly call push on it. For example, ... . unshift() To add multiple objects at the start of an array, you can repeatedly call unshift on it. For example, ... . Using the spread operator. The spread operator can help you copy over one array into another.. Can I make an array of images in JavaScript?You can create nested arrays that store arbitrary metadata such as the title, height, and width of the images.
|