I have these JavaScript objects
var oldObject=[{
id:1,
key:'name',
fiendSize:'6',
fromPlaceHolder:'',
fieldInstruction:'',
filedType:'input',
lable:"Single Line ",
type:'text',
formValidation: {
required:false
}
}];
var newObject= {
id:1,
key:'name',
fiendSize:'12',
fromPlaceHolder:'Enter Your Name',
fieldInstruction:'please Enter string only',
filedType:'input',
lable:"Single Line ",
type:'text',
formValidation: {
required:true
}
};
I need to replace/update the oldObject value with newObject value from with the same id.
So here is the result I want to get:
var oldObject = [{
id:1,
key:'name',
fiendSize:'12',
fromPlaceHolder:'Enter Your Name',
fieldInstruction:'please Enter string only',
filedType:'input',
lable:"Single Line ",
type:'text',
formValidation: {
required:true
}]
How can I implement it using JavaScript in react js ?
You can use Object.entries() like:
var oldObject = [{
id: 1,
key: 'name',
fiendSize: '6',
fromPlaceHolder: '',
fieldInstruction: '',
filedType: 'input',
lable: "Single Line ",
type: 'text',
formValidation: {
required: false
}
}];
var newObject = {
id: 1,
key: 'name',
fiendSize: '12',
fromPlaceHolder: 'Enter Your Name',
fieldInstruction: 'please Enter string only',
filedType: 'input',
lable: "Single Line ",
type: 'text',
formValidation: {
required: true
}
};
let result = [{}];
for (const [key, value] of Object.entries(oldObject[0])) {
result[0][key] = newObject[key];
}
console.log(result);Reference:
P.S. i used new object but you can update the old object and i hardcoded the array number so if you have more then 1 you need to use for-loop.
Since this is React you should be looking towards immutable data structures.
filter out the objects that don't match the id, and then add in the updated object.
const arr = [
{ id: 1, name: 1 },
{ id: 2, name: 2 },
{ id: 3, name: 3 }
];
const newArr = [
...arr.filter(obj => obj.id !== 2),
{ id: 2, name: 'Billy Joel' }
];
console.log(newArr);Additional documentation
Using Array.map and merge 2 object by {...existItem, ...newObject}.
var oldObject = [{
id: 1,
key: 'name',
fiendSize: '6',
fromPlaceHolder: '',
fieldInstruction: '',
filedType: 'input',
lable: "Single Line ",
type: 'text',
formValidation: {
required: false
}
}];
var newObject = {
id: 1,
key: 'name',
fiendSize: '12',
fromPlaceHolder: 'Enter Your Name',
fieldInstruction: 'please Enter string only',
filedType: 'input',
lable: "Single Line ",
type: 'text',
formValidation: {
required: true
}
};
var result = oldObject.map(item => {
var existItem = oldObject.find(e => e.id == newObject.id);
if (existItem) {
return {...existItem, ...newObject};
}
return item;
});
console.log(result);