CODEWITHSUNDEEP
javascriptarraysreactjs
erol_smsr
erol_smsr

Reputation: 1496

Modify one object's property by selecting it according to value

I have to change the value of a property of an object in an array. The array looks like this:

let myArrWithObjs = [
    { id: 1, selected: false },
    { id: 2, selected: false },
    { id: 3, selected: false }
];

I have a function that looks like this:

changeObjectVal = (id) => {
    // here I need to first find the right object within the array
    // and after that I should modify its aBoolean property to true
}

So, within the function I only know the id value. If the id parameter has a value of 2 I need to get the second object in the array (because its id is also 2). After that, I need to change the value of its selected property.

I found this code:

var selectedChartItemObj = myArrWithObjs.filter(function(obj) {
    return obj.id == id;
});

The problem is, this gives me a copy of the object, not the object itself.

Is there any way to modify the value of the property of the correct object in a shorter way? Using the spread operator I can make sure I don't mutate the entire array/object, but first I need to know how to change the value.

Upvotes: 1

Views: 74

Answers (5)

Nina Scholz
Nina Scholz

Reputation: 386560

You could use Object.assign after finding the object. This proposal uses a default object, but it could be omitted, if all objects with the wanted id exists.

Object.assign(array.find(o => o.id === id) || {}, { selected: true });
//            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^                             find object
//                                                ^^^^^^^^^^^^^^^^^^   update value

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191976

You can use Array#forEach to iterate, and change the object:

const myArrWithObjs = [
    { id: 1, selected: false },
    { id: 2, selected: false },
    { id: 3, selected: false }
];

myArrWithObjs.forEach((o) => o.id === 2 && (o.selected = true));

console.log(myArrWithObjs);

Upvotes: 1

Danilo Carrabino
Danilo Carrabino

Reputation: 397

I suggest you this simple implementation of changeObjectVal function:

changeObjectVal = (id) => {
    // here I need to first find the right object within the array
    // and after that I should modify its aBoolean property to true
    for(obj of myArrWithObjs) {
        if(id === obj.id) {
            obj.selected = true;
            break;
        }
    }
}

Upvotes: 1

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

You are creating a copy of it by assigning it to another variable. If you just set the property in the first item of filtered array, it will work fine.

If you have many items with same id, you can use .each loop to set it to true for every item.

let myArrWithObjs = [
    { id: 1, selected: false },
    { id: 2, selected: false },
    { id: 3, selected: false }
];

changeObjectVal = (id) => {
    myArrWithObjs.filter(function(obj) {
    return obj.id == id;
})[0].selected=true;
}
changeObjectVal(3);
console.log(myArrWithObjs);

Upvotes: 1

bm_i
bm_i

Reputation: 598

If you dont mind mutating the object within the array. This will work

// Using Array.prototype.find to get the inner object
const obj = myArrayWithObjs.find(o => o.id === id);
// Set the selected value
obj.selected = true

If you want to avoid mutating anything:

// Get the index 
const idx = myArrayWithObjs.findIndex(o => o.id === id);
const currObj = myArrayWithObjs[idx] 
// New object with spread
const nextObj = {
    ...currObj,
    selected: true
};
// New array with spread
const nextArray = [
    ...myArrayWithObjs.slice(0, idx),
    nextObj,
    ...myArrayWithObjs.slice(idx + 1)
];

Upvotes: 3

Related Questions