javascript - How can I find and update values in an array of objects? - Stack Overflow

admin管理员组

文章数量:1128483

I have an array of objects. I want to find by some field, and then to change it:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.find(x => x.id == item.id);
foundItem = item;

I want it to change the original object. How? (I don't care if it will be in Lodash too.)

I have an array of objects. I want to find by some field, and then to change it:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.find(x => x.id == item.id);
foundItem = item;

I want it to change the original object. How? (I don't care if it will be in Lodash too.)

• javascript
• arrays
• ecmascript-6
• lodash

Share Improve this question Follow edited Jan 6, 2022 at 13:48 isherwood 61k1616 gold badges120120 silver badges168168 bronze badges asked Feb 4, 2016 at 16:17 user3712353user3712353 4,20144 gold badges2222 silver badges3535 bronze badges 1

• Dose your newer object item contains a id key? or do you mind having the id as well as all the properties from item object in the array entry? – Koushik Chatterjee Commented Sep 20, 2018 at 10:37

Add a comment  | 

12 Answers 12

Sorted by: Reset to default 467

You can use findIndex to find the index in the array of the object and replace it as required:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundIndex = items.findIndex(x => x.id == item.id);
items[foundIndex] = item;

This assumes unique IDs. If your IDs are duplicated (as in your example), it's probably better if you use forEach:

items.forEach((element, index) => {
    if(element.id === item.id) {
        items[index] = item;
    }
});

My best approach is:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

items[items.findIndex(el => el.id === item.id)] = item;

Reference for findIndex

And in case you don't want to replace with new object, but instead to copy the fields of item, you can use Object.assign:

Object.assign(items[items.findIndex(el => el.id === item.id)], item)

as an alternative with .map():

Object.assign(items, items.map(el => el.id === item.id? item : el))

Functional approach:

Don't modify the array, use a new one, so you don't generate side effects

const updatedItems = items.map(el => el.id === item.id ? item : el)

Note

Properly used, references to objects are not lost, so you could even use the original object reference, instead of creating new ones.

const myArr = [{ id: 1 }, { id: 2 }, { id: 9 }];
const [a, b, c] = myArr;
// modify original reference will change object in the array
a.color = 'green';
console.log(myArr[0].color); // outputs 'green'

This issue usually happens when consuming lists from database and then mapping the list to generate HTML content which will modify the elements of the list, and then we need to update the list and send it back to database as a list.

Good news is, references are kept, so you could organize your code to get advantage of it, and think about a list as an Object with identities for free, which are integers from 0 to length -1. So every time you access any property of your Object, do it as list[i], and you don't lose reference, and original object is changed. Keep in mind that this is useful when your source of truth is only one (the Object created), and your app is always consistently consuming the same Object (not fetching several times from database and assigning it to list along the lifespan of the component).

Bad news is that the architecture is wrong, and you should receive an object by ids (dictionary) if this is what you need, something like

{ 
  1232: { id: 1232, ...},
  asdf234asf: { id: 'asdf234asf', ...},
  ...
}

This way, you don't search in arrays, which is resource consuming. You "just access by key in the object", which is instant and performant.

One-liner using spread operator.

 const updatedData = originalData.map(x => (x.id === id ? { ...x, updatedField: 1 } : x));

An other approach is to use splice.

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

N.B : In case you're working with reactive frameworks, it will update the "view", your array "knowing" you've updated it.

Answer :

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

let foundIndex = items.findIndex(element => element.id === item.id)
items.splice(foundIndex, 1, item)

And in case you want to only change a value of an item, you can use find function :

// Retrieve item and assign ref to updatedItem
let updatedItem = items.find((element) => { return element.id === item.id })

// Modify object property
updatedItem.aProp = ds.aProp

Given a changed object and an array:

const item = {...}
let items = [{id:2}, {id:3}, {id:4}];

Update the array with the new object by iterating over the array:

items = items.map(x => (x.id === item.id) ? item : x)

May be use Filter.

const list = [{id:0}, {id:1}, {id:2}];
let listCopy = [...list];
let filteredDataSource = listCopy.filter((item) => {
       if (item.id === 1) {
           item.id = 12345;
        }

        return item;
    });
console.log(filteredDataSource);

Array [Object { id: 0 }, Object { id: 12345 }, Object { id: 2 }]

I don't see this approach in the answers yet, so here's a simple little one liner

let item = {id: 1, new: true};
let items = [{id: 1}, {id: 2}];

let replaced = [item, ...items.filter(i => i.id !== item.id)]

You're just adding the item to the original array filtered of the item you're replacing.

Whereas most of the existing answers are great, I would like to include an answer using a traditional for loop, which should also be considered here. The OP requests an answer which is ES5/ES6 compatible, and the traditional for loop applies :)

The problem with using array functions in this scenario, is that they don't mutate objects, but in this case, mutation is a requirement. The performance gain of using a traditional for loop is just a (huge) bonus.

const findThis = 2;
const items = [{id:1, ...}, {id:2, ...}, {id:3, ...}];

for (let i = 0, l = items.length; i < l; ++i) {
  if (items[i].id === findThis) {
    items[i].iAmChanged = true;
    break;
  }
}

Although I am a great fan of array functions, don't let them be the only tool in your toolbox. If the purpose is mutating the array, they are not the best fit.

find and update values in an array using useState and map es6

    const item = {id:5}
    const items = [{id:2}, {id:2}, {id:2}];

    const [list, setList] = useState(items)

    const onChange = (item) => {
        const newList = list.map((el) => {
                if (el.id === item.id) {
                    return item;
                }
                return el;
            });
        setList(newList);
    }

In my case, I wanted to find some element ( and its length) and wanted to add a new element no_of_agents in the object itself. So following did help me

  details.forEach(obj => {
                const length = obj["fleet_ids"].length || 0;
                obj.set("no_of_agents" , length)
            });

Somehow map() returned with other details(like '$__': InternalCache, strictMode, shardval, etc) which was not required,

worked for me

let returnPayments = [ ...this.payments ];

returnPayments[this.payments.findIndex(x => x.id == this.payment.id)] = this.payment;

You can do like this too

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.filter((x) => x.id ==  item.id).pop();
foundItem = item;

OR

items.filter((x) => x.id ==  item.id).pop()=item;

 

本文标签： javascriptHow can I find and update values in an array of objectsStack Overflow