Locate and modify a specific element within an array of objects

Question

Locate and modify a specific element within an array of objects

Currently, I am working with an array that looks like this:

arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa'}]

. However, I need to add a condition to the array. If the id 'fifth' is found in the array, then I want to update it to look like this:

arr = [{id:'first',name:'John'},{id:'sixth',name:'Kat'},{id:'eitghth',name:'Isa'}]

I only need to modify one part of an item. How can I achieve this using JavaScript?

javascript arrays

Answer 1

Answer №1

To locate the entry and update its id attribute, you can utilize the Array.prototype.find method:

const arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa']];

const entry = arr.find(item => item.id === 'fifth');
entry.id = 'sixth';

console.log(arr);

If you want to replace a specific entry by finding its index, you can also make use of Array.prototype.findIndex:

const arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa']];

const targetIndex = arr.findIndex(item => item.id === 'fifth');
arr[targetIndex].id = 'sixth';

console.log(arr);

If there are multiple entries with the same ID in the array and you need to update all of them, iterating through the array is a better approach:

const arr = [{id:'fifth',name:'Kat'},{id:'fifth',name:'Kat'},{id:'fifth',name:'Kat'}];

arr.forEach(item => {
  if (item.id === 'fifth') {
    item.id = 'sixth';
  }
});

console.log(arr);

Answer 2

To locate the entry and update its id attribute, you can utilize the Array.prototype.find method:

const arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa']];

const entry = arr.find(item => item.id === 'fifth');
entry.id = 'sixth';

console.log(arr);

If you want to replace a specific entry by finding its index, you can also make use of Array.prototype.findIndex:

const arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa']];

const targetIndex = arr.findIndex(item => item.id === 'fifth');
arr[targetIndex].id = 'sixth';

console.log(arr);

If there are multiple entries with the same ID in the array and you need to update all of them, iterating through the array is a better approach:

const arr = [{id:'fifth',name:'Kat'},{id:'fifth',name:'Kat'},{id:'fifth',name:'Kat'}];

arr.forEach(item => {
  if (item.id === 'fifth') {
    item.id = 'sixth';
  }
});

console.log(arr);

Locate and modify a specific element within an array of objects

Answer №1

Similar questions

Converting an array of objects into a flat array of objects with Javascript

Set the current time to ISO8601 format

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

Are the functionalities of twilio-common.js on github equivalent to those of twilio-client.js on their CDN?

Expand and enhance your content with the Vue Sidebar Menu plugin

The some() method in Javascript with an extra argument

An Unexpected Token Leads to a SyntaxError in Jest's CSS-Modules

Exploring AngularJS $compile and the concept of scoping within JavaScript windows

When utilizing the .populate() method in Mongoose, how can you retrieve and append ObjectIds with extra attributes to an array (which is returned by .populate()) collected from the

Calculating the total sum of data in a JSON file by grouping it based

What is the best way to send multiple id values with the same classname as an array to the database via AJAX in Codeigniter?

What are the reasons behind Jquery's decreased speed performance in Internet Explorer?

The radial gradient in d3.js does not properly affect paths

Showcase pictures from a directory in real-time using a combination of jQuery and Bootstrap as the folder continues to fill up with images

Using AJAX to remove data from a database

SVGs do not display on iPhones

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

Ways to switch out error message for an error landing page

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

An error occured upon loading FullCalendar: Uncaught TypeError - Unable to read property 'push' as it is undefined