How can I update a json object inside of an array?

Question

I have an array of objects and I want to update some of the content. I figured I could just map through the objects, find the match I was looking for and than update it.

data = data.map(obj => {
   return this.state.objToFind === obj.title;   
   }).map(obj, idx) => {
      console.log("found " + obj.title);     // reads found + undefined?
      obj.menu = this.state.menu;
      obj.title = this.state.title;
      obj.content = this.state.content;
 });

However, this is not working. I find the object but obj.anything is undefined. My console.log reads "Found undefined".

Answer 1

data.map(obj => {
  return this.state.objToFind === obj.title;   
})

the first map will return an array of true and false, the second map will loop through these values and the console.log("found " + obj.title) will prints "found + undefined" consequently.

maybe you wanted something like this.

data = data.filter(obj => {
   return this.state.objToFind === obj.title;   
   }).map(obj, idx) => {
      console.log("found " + obj.title);
      obj.menu = this.state.menu;
      obj.title = this.state.title;
      obj.content = this.state.content;
      return obj;
 });

Answer 2

Change it to some other variable instead of obj since it refers to parent obj which is an array . Also use array.filter in the first function that will return an array,

data = data.filter(obj => {
   return this.state.objToFind === obj.title;   
   }).map(newval, idx) => {
      console.log("found " + newval.title);     
      newval.menu = this.state.menu;
      newval.title = this.state.title;
      newval.content = this.state.content;
 });

Answer 3

Map is used to return a mutated object. When using map you need to return something back, in your case modified object.

However There are things you're doing wrong. 1) you're using .map to search something (thats not how you use map); try using .filter or .find 2) after updating your object using map (in 2nd function), you need to return it back. case 1:

data = data.filter(obj => {
       return this.state.objToFind === obj.title;   
   }).map(foundObj, idx) => {
          console.log("found " + foundObj.title);
          foundObj.menu = this.state.menu;
          foundObj.title = this.state.title;
          foundObj.content = this.state.content;
      return foundObj; //updated obj
 });

case 2:

    var foundObj = data.find(obj => {
     return this.state.objToFind === obj.title;   
   });
    console.log("found " + foundObjs.title);
    foundObjs.menu = this.state.menu;
    foundObjs.title = this.state.title;
    foundObjs.content = this.state.content;

Answer 4

If you want to process only those elements which makes this.state.objToFind === obj.title true then Array.filter is what you need like

data = data.filter(obj => {
   return this.state.objToFind === obj.title;   
   }).map(obj, idx) => {
      console.log("found " + obj.title);     // reads found + undefined?
     ...
 });

Answer 5

EVEN SIMPLER

You could use the some operator. (It works by iterating over the array, when you return true it breaks out of the loop)

data.some(function(obj){
   if (obj.title ==== 'some value'){
        //change the value here
        obj.menu = 'new menu';
        obj.title = 'new title';
        return true;    //breaks out of he loop
   }
});