How TO

How to Update and Find Objects in a Javascript Array

You’ll need to comprehend how to work with arrays and objects to be a Javascript developer. You’ll need to understand how to manage items within collections in particular. Fortunately, we are here to assist you. Continue reading to learn more about our dilemma and the many approaches we might take to solve it.

The Issue – Locate and Update an Object in an Array

var inventory = [{item: 'shirt', quantity: 10}, {item: 'pants', quantity: 4}]

We wish to update the amount of an item in this array. Without transferring the entire array to a new variable, we’d want to achieve this. We can use the findIndex function to find the index of the item we require because we’re working with an array at the most basic level.

findIndex is the answer

It’s easy to use findIndex. Here’s the code, along with a breakdown:

var itemIndex = inventory.findIndex(x => x.item == 'shirt')

var item = inventory[itemIndex]
item.quantity = 2

inventory[itemIndex] = item

We use the found index on the array in the first line to look for the object we want.
In this example, it’s a shirt, but it’d be some unique identity in a real-world scenario. The object’s index location within our array is returned as the return value. As demonstrated in lines two and three, we can now pull that object into a variable and alter any field we want. Finally, we write our new object back into the old array in line four.

var itemIndex = inventory.findIndex(x => x.item == 'shirt')

inventory[itemIndex] = {...inventory[itemIndex], quantity: 2}

We may also use the space operator to shorten the solution when writing back to the array.

You can see in the instance above that we bypassed adding our object to a variable and instead wrote the changed object straight to the array. This procedure is simple and straightforward, but it requires that you’re looking for an item in your array that has a unique identity. If the array contains a repeat object, you’ll need to conduct your action in a loop. Here’s an illustration:

inventory.forEach(x, index) => {
  if(x.item == 'shirt') {
    inventory[index] = {...x, quantity: 2}
  }
}

You may, of course, use any looping syntax for this process. We hope you found this information useful. Please feel free to reach me if you have any queries regarding the code above or javascript in general.

Click to comment
Exit mobile version