How to update key values behalf of Id's

Question

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 ?

Note that `oldObject` is an array of objects and `newObject` is a single object. — Heretic Monkey, Oct 04 '21 at 11:01

score 1 · Answer 1 · answered Oct 04 '21 at 10:55

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:

Object.entries()

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.

Andy · Answer 2 · 2021-10-04T11:07:20.763

1

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

Spread syntax

edited Oct 04 '21 at 11:07

answered Oct 04 '21 at 10:59

Andy

61,948
13
68
95

score 1 · Answer 3 · answered Oct 04 '21 at 11:01

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);

score 0 · Answer 4 · answered Oct 04 '21 at 11:03

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
  }
};


const findByIdWithIndex = oldObject.findIndex(d => d.id === newObject.id)

if (findByIdWithIndex !== -1) {
  // Found the Old object id Matching with new object id
  oldObject[findByIdWithIndex] = { ...newObject
  }
}

console.log("Updated oldObject :", oldObject)

Update the Index found with new object Id to old Object Id's index and replace it.

How to update key values behalf of Id's

4 Answers4