JavaScript : Find and update a value in an array of objects

Javascript array of objects is the representation of multiple values of the same type of data. This we group together and store in a single variable.

Before starting directly about finding and updating values, let’s learn the basics first. We usually use an array of objects to hold data we use in day to day life.

It can be any data, taking an example like user data/employee data. Each object contains individual user data and the array is what we hold to in the database or memory.

Javascript array of objects

An array of objects is the data structure, where it lets us store multiple values of the same type of data. This we group together and store in a single variable. This can be declared just as an array of any built-in type. 

Example

Here is the single object representation and its value is printed.

var emp = {
   name: 'Vishal',
   age: 30,
   isManager: false,
   city: 'Mumbai',
 }
 console.log('Employee:', emp) //Employee: { name: 'Vishal', age: 30, isManager: false, city: 'Mumbai' } 
 console.log('Employee age:', emp.age) //Employee age: 30

Now, let’s see the same example for multiple employee details with the help of Javascript array of objects.

var empEligibilityDetails = [
    {
      "name": "Vishal",
      "age": 30,
      "isManager": false,
      "city": "Mumbai"
    },
    {
      "name": "Kunal",
      "age": 31,
      "isManager": false,
      "city": "Pune"
    },
    {
      "name": "Ajay",
      "age": 32,
      "isManager": true,
      "city": "Thane"
    },
    {
      "name": "Rahul",
      "age": 36,
      "isManager": true,
      "city": "Mumbai"
    }
  ];

Sometimes we need to perform operations on an array of objects like accessing and iterating over the data, finding data on condition, updating values. Moreover, I have added posts for operations on arrays like add/remove items from an array, filter data and modify using splice() & slice().

find the element in an array – find() method

Now, we know how the JavaScript array of objects looks like. Next, we have a task, how to find the value of just a key in just one object? We can find the value with the help of find() method. You also have an alternative of using for-loop and if statement.

The find() method returns the value of the 1st element in an array that satisfies the condition. If no values satisfy the condition, it returns undefined. So, if you need to find multiple values that satisfy the condition, go for filter().

Syntax

array.find(callback, [arg])

Example

var empEligibilityDetails = [
    {
      "name": "Vishal",
      "age": 30,
      "isManager": false,
      "city": "Mumbai"
    },
    {
      "name": "Kunal",
      "age": 31,
      "isManager": false,
      "city": "Pune"
    },
    {
      "name": "Ajay",
      "age": 32,
      "isManager": true,
      "city": "Thane"
    },
    {
      "name": "Rahul",
      "age": 36,
      "isManager": true,
      "city": "Mumbai"
    }
  ];

var empData = empEligibilityDetails.find(value => value.age > 31);
console.log(empData); // { name: 'Ajay', age: 32, isManager: true, city: 'Thane' } 

As you can see, the output next to the console statement shows single employee data even though 2 employees satisfies the condition of age > 31.

//If you want to skip 1st record, you can play with index passed in argument
var empNewData = empEligibilityDetails.find((value, i) => {
    if (value.age > 28 && i !== 0) return true;
});
console.log(empNewData); // { name: 'Kunal', age: 31, isManager: false, city: 'Pune' }

As show in the code above, with the use of index, we can keep track of record in the dataset.

Update the value

We found the element with the help of find() method. Now that we want to update that particular object’s value. This is simple, you just need to know the property name. The example below is the way we can achieve updation in particular result object.

empEligibilityDetails.find(value => value.age > 31).isManager = false; // update 'isManager' to false
console.log(empEligibilityDetails); 

Output:

[ { name: 'Vishal', age: 30, isManager: false, city: 'Mumbai' },
   { name: 'Kunal', age: 31, isManager: false, city: 'Pune' },
   { name: 'Ajay', age: 32, isManager: false, city: 'Thane' },
   { name: 'Rahul', age: 36, isManager: true, city: 'Mumbai' } ]

JavaScript find() is a simple but very useful method for searching in a JavaScript array of objects. So this is how we can find and update a value in an array of objects. As mentioned earlier, find() gives us the first occurrence of an object found in the array. You can refer the above code here.

I hope you enjoyed this post. If you have any question/suggestion, feel free to leave your comments below.

For more details on find() see MDN Reference.

Dear reader, a sincere review from you would encourage me to write even more 😉

Stay tuned. Happy Learning.