How do you manipulate an array of objects in javascript?

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?

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:

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date['2012-02-03'],
  "capacity": 7
}

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 objects

But 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:

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
  },
  {
    ...
  },
  ...
]

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.unshift

To add an object at the first position, use Array.unshift.

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date['2016-05-02'],
  "capacity": 2
}
cars.unshift[car];

Add a new object at the end - Array.push

To add an object at the last position, use Array.push.

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date['2016-05-02'],
 "capacity": 2
}
cars.push[car];

Add a new object in the middle - Array.splice

To add an object in the middle, use Array.splice. This function is very handy as it can also remove items. Watch out for its parameters:

Array.splice[
  {index where to start},
  {how many items to remove},
  {items to add}
];

So if we want to add the red Volkswagen Cabrio on the fifth position, we'd use:

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date['2016-05-02'],
  "capacity": 2
}
cars.splice[4, 0, car];

Looping through an array of objects

Let 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.find

Let's say we want to find a car that is red. We can use the function Array.find.

let car = cars.find[car => car.color === "red"];

This function returns the first matching 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
// }

It's also possible to search for multiple values:

let car = cars.find[car => car.color === "red" && car.type === "cabrio"];

In that case we'll get the last car in the list.

Get multiple items from an array that match a condition - Array.filter

The Array.find function returns only one object. If we want to get all red cars, we need to use 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
//   }
// ]

Transform objects of an array - Array.map

This is something we need very often. Transform an array of objects into an array of different objects. That's a job for Array.map. Let's say we want to classify our cars into three groups based on their size.

let sizes = cars.map[car => {
  if [car.capacity  value structure.