How to change value of object which is inside an array using JavaScript or jQuery?

Javascript Problem Overview

The code below comes from jQuery UI Autocomplete:

var projects = [
	{
		value: "jquery",
		label: "jQuery",
		desc: "the write less, do more, JavaScript library",
		icon: "jquery_32x32.png"
	},
	{
		value: "jquery-ui",
		label: "jQuery UI",
		desc: "the official user interface library for jQuery",
		icon: "jqueryui_32x32.png"
	},
	{
		value: "sizzlejs",
		label: "Sizzle JS",
		desc: "a pure-JavaScript CSS selector engine",
		icon: "sizzlejs_32x32.png"
	}
];

For example, I want to change the desc value of jquery-ui. How can I do that?

Additionally, is there a faster way to get the data? I mean give the object a name to fetch its data, just like the object inside an array? So it would be something like jquery-ui.jquery-ui.desc = ....

Javascript Solutions

Solution 1 - Javascript

It is quite simple

Find the index of the object using findIndex method.
Store the index in variable.
Do a simple update like this: yourArray[indexThatyouFind]

//Initailize array of objects.
let myArray = [
  {id: 0, name: "Jhon"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
],
    
//Find index of specific object using findIndex method.    
objIndex = myArray.findIndex((obj => obj.id == 1));

//Log object to Console.
console.log("Before update: ", myArray[objIndex])

//Update object's name property.
myArray[objIndex].name = "Laila"

//Log object to console again.
console.log("After update: ", myArray[objIndex])

Solution 2 - Javascript

You have to search in the array like:

function changeDesc( value, desc ) {
   for (var i in projects) {
     if (projects[i].value == value) {
        projects[i].desc = desc;
        break; //Stop this loop, we found it!
     }
   }
}

and use it like

var projects = [ ... ];
changeDesc ( 'jquery-ui', 'new description' );

UPDATE:

To get it faster:

var projects = {
   jqueryUi : {
      value:  'lol1',
      desc:   'lol2'
   }
};

projects.jqueryUi.desc = 'new string';

(In according to Frédéric's comment you shouldn't use hyphen in the object key, or you should use "jquery-ui" and projects["jquery-ui"] notation.)

Solution 3 - Javascript

The best solution, thanks to ES6.

This returns a new array with a replaced description for the object that contains a value equal to "jquery-ui".

const newProjects = projects.map(p =>
  p.value === 'jquery-ui'
    ? { ...p, desc: 'new description' }
    : p
);

Solution 4 - Javascript

Using map is the best solution without using extra libraries.(using ES6)

const state = [
{
    userId: 1,
    id: 100,
    title: "delectus aut autem",
    completed: false
},
{
    userId: 1,
    id: 101,
    title: "quis ut nam facilis et officia qui",
    completed: false
},
{
    userId: 1,
    id: 102,
    title: "fugiat veniam minus",
    completed: false
},
{
    userId: 1,
    id: 103,
    title: "et porro tempora",
    completed: true
}]

const newState = state.map(obj =>
    obj.id === "101" ? { ...obj, completed: true } : obj
);

Solution 5 - Javascript

ES6 way, without mutating original data.

var projects = [
{
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"
},
{
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"
}];

//find the index of object from array that you want to update
const objIndex = projects.findIndex(obj => obj.value === 'jquery-ui');

// make new object of updated object.   
const updatedObj = { ...projects[objIndex], desc: 'updated desc value'};

// make final new array of objects by combining updated object.
const updatedProjects = [
  ...projects.slice(0, objIndex),
  updatedObj,
  ...projects.slice(objIndex + 1),
];

console.log("original data=", projects);
console.log("updated data=", updatedProjects);

Solution 6 - Javascript

You can use $.each() to iterate over the array and locate the object you're interested in:

$.each(projects, function() {
    if (this.value == "jquery-ui") {
        this.desc = "Your new description";
    }
});

Solution 7 - Javascript

you can use .find so in your example

   var projects = [
            {
                value: "jquery",
                label: "jQuery",
                desc: "the write less, do more, JavaScript library",
                icon: "jquery_32x32.png"
            },
            {
                value: "jquery-ui",
                label: "jQuery UI",
                desc: "the official user interface library for jQuery",
                icon: "jqueryui_32x32.png"
            },
            {
                value: "sizzlejs",
                label: "Sizzle JS",
                desc: "a pure-JavaScript CSS selector engine",
                icon: "sizzlejs_32x32.png"
            }
        ];

let project = projects.find((p) => {
    return p.value === 'jquery-ui';
});

project.desc = 'your value'

Solution 8 - Javascript

given the following data, we want to replace berries in the summerFruits list with watermelon.

const summerFruits = [
{id:1,name:'apple'}, 
{id:2, name:'orange'}, 
{id:3, name: 'berries'}];

const fruit = {id:3, name: 'watermelon'};

Two ways you can do this.

First approach:

//create a copy of summer fruits.
const summerFruitsCopy = [...summerFruits];

//find index of item to be replaced
const targetIndex = summerFruits.findIndex(f=>f.id===3); 

//replace the object with a new one.
summerFruitsCopy[targetIndex] = fruit;

Second approach: using map, and spread:

const summerFruitsCopy = summerFruits.map(fruitItem => 
fruitItem .id === fruit.id ? 
    {...summerFruits, ...fruit} : fruitItem );

summerFruitsCopy list will now return an array with updated object.

Solution 9 - Javascript

It's easily can be accomplished with underscore/lodash library:

  _.chain(projects)
   .find({value:"jquery-ui"})
   .merge({desc: "new desc"}).value();

Docs:
https://lodash.com/docs#find
https://lodash.com/docs#merge

Solution 10 - Javascript

you need to know the index of the object you are changing. then its pretty simple

projects[1].desc= "new string";

Solution 11 - Javascript

This is another answer involving find. This relies on the fact that find:

iterates through every object in the array UNTIL a match is found
each object is provided to you and is MODIFIABLE

Here's the critical Javascript snippet:

projects.find( function (p) {
    if (p.value !== 'jquery-ui') return false;
    p.desc = 'your value';
    return true;
} );

Here's an alternate version of the same Javascript:

projects.find( function (p) {
    if (p.value === 'jquery-ui') {
        p.desc = 'your value';
        return true;
    }
    return false;
} );

Here's an even shorter (and somewhat more evil version):

projects.find( p => p.value === 'jquery-ui' && ( p.desc = 'your value', true ) );

Here's a full working version:

  let projects = [
            {
                value: "jquery",
                label: "jQuery",
                desc: "the write less, do more, JavaScript library",
                icon: "jquery_32x32.png"
            },
            {
                value: "jquery-ui",
                label: "jQuery UI",
                desc: "the official user interface library for jQuery",
                icon: "jqueryui_32x32.png"
            },
            {
                value: "sizzlejs",
                label: "Sizzle JS",
                desc: "a pure-JavaScript CSS selector engine",
                icon: "sizzlejs_32x32.png"
            }
        ];

projects.find( p => p.value === 'jquery-ui' && ( p.desc = 'your value', true ) );

console.log( JSON.stringify( projects, undefined, 2 ) );

Solution 12 - Javascript

I think this way is better

const index = projects.findIndex(project => project.value==='jquery-ui');
projects[index].desc = "updated desc";

Solution 13 - Javascript

const users = [
  { name: "Alex", age: 25 },
  { name: "John", age: 32 },
];

const newUsers = users.map((user) => ({
  ...user,
  age: user.age + 5, // just for example
}));

// newUsers = [
// {name:"Alex" , age:30},
// {name:"John , age:37}
// ]

Solution 14 - Javascript

// using higher-order functions to avoiding mutation
var projects = [            {                value: "jquery",                label: "jQuery",                desc: "the write less, do more, JavaScript library",                icon: "jquery_32x32.png"            },            {                value: "jquery-ui",                label: "jQuery UI",                desc: "the official user interface library for jQuery",                icon: "jqueryui_32x32.png"            },            {                value: "sizzlejs",                label: "Sizzle JS",                desc: "a pure-JavaScript CSS selector engine",                icon: "sizzlejs_32x32.png"            }        ];

// using higher-order functions to avoiding mutation
index = projects.findIndex(x => x.value === 'jquery-ui');
[... projects.slice(0,index), {'x': 'xxxx'}, ...projects.slice(index + 1, projects.length)];

Solution 15 - Javascript

try using forEach(item,index) helper

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
    }
];

let search_to_change = 'jquery'

projects.forEach((item,index)=>{
   if(item.value == search_to_change )
      projects[index].desc = 'your description ' 
})

Solution 16 - Javascript

let users = [
    {id: 1, name: 'Benedict'},
    {id: 2, name: 'Myles'},
    {id: 3, name: 'Happy'},
]

 users.map((user, index) => {
 if(user.id === 1){
  users[index] = {id: 1, name: 'Baba Benny'};    
 }
 
 return user
})


console.log(users)

What this code does is map over the object and then match the desired with if statement,

if(user.id === 1)

once there is match somewhere use its index to swap

 users[index] = {id: 1, name: 'Baba Benny'};

the object in the array and then return the modified array

Solution 17 - Javascript

You can use map function --

const answers = this.state.answers.map(answer => {
  if(answer.id === id) return { id: id, value: e.target.value }
  return answer
})

this.setState({ answers: answers })

Solution 18 - Javascript

Change value with conditions using for each loop

projects.forEach((p,index)=>{
    if(index === 1){
       p.value = "Updated jquery-ui"
    }
})

Solution 19 - Javascript

Here is a nice neat clear answer. I wasn't 100% sure this would work but it seems to be fine. Please let me know if a lib is required for this, but I don't think one is. Also if this doesn't work in x browser please let me know. I tried this in Chrome IE11 and Edge they all seemed to work fine.

    var Students = [
        { ID: 1, FName: "Ajay", LName: "Test1", Age: 20},
        { ID: 2, FName: "Jack", LName: "Test2", Age: 21},
        { ID: 3, FName: "John", LName: "Test3", age: 22},
        { ID: 4, FName: "Steve", LName: "Test4", Age: 22}
    ]

    Students.forEach(function (Student) {
        if (Student.LName == 'Test1') {
            Student.LName = 'Smith'
        }
        if (Student.LName == 'Test2') {
            Student.LName = 'Black'
        }
    });

    Students.forEach(function (Student) {
        document.write(Student.FName + " " + Student.LName + "<BR>");
    });

Output should be as follows

Ajay Smith

Jack Black

John Test3

Steve Test4

Solution 20 - Javascript

Assuming you wanted to run a bit more complicated codes during the modification, you might reach for an if-else statement over the ternary operator approach

// original 'projects' array;
var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
    }
];

// modify original 'projects' array, and save modified array into 'projects' variable
projects = projects.map(project => {
// When there's an object where key 'value' has value 'jquery-ui'
    if (project.value == 'jquery-ui') {

// do stuff and set a new value for where object's key is 'value'
        project.value = 'updated value';

// do more stuff and also set a new value for where the object's key is 'label', etc.
        project.label = 'updated label';

// now return modified object
        return project;
    } else {
// just return object as is
        return project;
    }
});

// log modified 'projects' array
console.log(projects);

Solution 21 - Javascript

Method:1

You can use for each, for loop for that

const projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
    }
];


for (let project of projects){
    if(project.value === "jquery-ui"){
         project.desc = "change value of desc of jquery-ui"
    }
}

console.log(projects)

Method: 2

Using map

const newProject = projects.map((project, index)=>{
     if(project.value === "jquery-ui"){
           project.desc = "change value of desc of jquery-ui"
     }
});

console.log(newProject)

Method: 3

//Find index of specific object using findIndex method.    
objIndex = projects.findIndex((obj => obj.value ===  "jquery-ui"));

//Log object to Console.
console.log("Before update: ", myArray[objIndex])

//Update object's name property.
projects[objIndex].desc = "change value of desc of jquery-ui"

Solution 22 - Javascript

We can also use Array's map function to modify object of an array using Javascript.

function changeDesc(value, desc){
   projects.map((project) => project.value == value ? project.desc = desc : null)
}

changeDesc('jquery', 'new description')

Solution 23 - Javascript

The power of javascript destructuring

const projects = [
  {
    value: 'jquery',
    label: 'jQuery',
    desc: 'the write less, do more, JavaScript library',
    icon: 'jquery_32x32.png',
    anotherObj: {
      value: 'jquery',
      label: 'jQuery',
      desc: 'the write less, do more, JavaScript library',
      icon: 'jquery_32x32.png',
    },
  },
  {
    value: 'jquery-ui',
    label: 'jQuery UI',
    desc: 'the official user interface library for jQuery',
    icon: 'jqueryui_32x32.png',
  },
  {
    value: 'sizzlejs',
    label: 'Sizzle JS',
    desc: 'a pure-JavaScript CSS selector engine',
    icon: 'sizzlejs_32x32.png',
  },
];

function createNewDate(date) {
  const newDate = [];
  date.map((obj, index) => {
    if (index === 0) {
      newDate.push({
        ...obj,
        value: 'Jquery??',
        label: 'Jquery is not that good',
        anotherObj: {
          ...obj.anotherObj,
          value: 'Javascript',
          label: 'Javascript',
          desc: 'Write more!!! do more!! with JavaScript',
          icon: 'javascript_4kx4k.4kimage',
        },
      });
    } else {
      newDate.push({
        ...obj,
      });
    }
  });

  return newDate;
}

console.log(createNewDate(projects));

Solution 24 - Javascript

Find the index first:

function getIndex(array, key, value) {
        var found = false;
        var i = 0;
        while (i<array.length && !found) {
          if (array[i][key]==value) {
            found = true;
            return i;
          }
          i++;
        }
      }

Then:

console.log(getIndex($scope.rides, "_id", id));

Then do what you want with this index, like:

$scope[returnedindex].someKey = "someValue";

Note: please do not use for, since for will check all the array documents, use while with a stopper, so it will stop once it is found, thus faster code.

Solution 25 - Javascript

Here i am using angular js. In javascript you can use for loop to find.

    if($scope.bechval>0 &&$scope.bechval!=undefined)
    {
       
                angular.forEach($scope.model.benhmarkghamlest, function (val, key) {
                $scope.model.benhmarkghamlest[key].bechval = $scope.bechval;

            });
    }
    else {
        alert("Please sepecify Bechmark value");
    }

Solution 26 - Javascript

You can create your specific function like the below, then use that everywhere you need.

var each	= (arr, func) => 
				Array.from(
					(function* (){
						var i = 0;
						for(var item of arr)
							yield func(item, i++);
					})()
				);

Enjoy..

Solution 27 - Javascript

upsert(array, item) { 
        const i = array.findIndex(_item => _item.id === item.id);
        if (i > -1) {
            let result = array.filter(obj => obj.id !== item.id);
            return [...result, item]
        }
        else {
            return [...array, item]
        };
    }

Solution 28 - Javascript

to update multiple items with the matches use:

_.chain(projects).map(item => {
      item.desc = item.value === "jquery-ui" ? "new desc" : item.desc;
      return item;
    })

Solution 29 - Javascript

Try this code. it uses jQuery grep function

array = $.grep(array, function (a) {
    if (a.Id == id) {
        a.Value= newValue;
    }
    return a;
});

Solution 30 - Javascript

This is my response to the problem. My underscore version was 1.7 hence I could not use .findIndex.

So I manually got the index of item and replaced it. Here is the code for the same.

 var students = [ 
{id:1,fName:"Ajay", lName:"Singh", age:20, sex:"M" },
{id:2,fName:"Raj", lName:"Sharma", age:21, sex:"M" },
{id:3,fName:"Amar", lName:"Verma", age:22, sex:"M" },
{id:4,fName:"Shiv", lName:"Singh", age:22, sex:"M" }
               ]

Below method will replace the student with id:4 with more attributes in the object

function updateStudent(id) {
 var indexOfRequiredStudent = -1;
    _.each(students,function(student,index) {                    
      if(student.id === id) {                        
           indexOfRequiredStudent = index; return;      
      }});
 students[indexOfRequiredStudent] = _.extend(students[indexOfRequiredStudent],{class:"First Year",branch:"CSE"});

}

With underscore 1.8 it will be simplified as we have methods _.findIndexOf.

Solution 31 - Javascript

Let you want to update value of array[2] = "data"

    for(i=0;i<array.length;i++){
      if(i == 2){
         array[i] = "data";
        }
    }

Solution 32 - Javascript

let thismoth = moment(new Date()).format('MMMM');
months.sort(function (x, y) { return x == thismoth ? -1 : y == thismoth ? 1 : 0; });

Content Type	Original Author	Original Content on Stackoverflow
Question	qinHaiXiang	View Question on Stackoverflow
Solution 1 - Javascript	Umair Ahmed	View Answer on Stackoverflow
Solution 2 - Javascript	Aston	View Answer on Stackoverflow
Solution 3 - Javascript	kintaro	View Answer on Stackoverflow
Solution 4 - Javascript	Ankit Kumar Rajpoot	View Answer on Stackoverflow
Solution 5 - Javascript	Bimal Grg	View Answer on Stackoverflow
Solution 6 - Javascript	Frédéric Hamidi	View Answer on Stackoverflow
Solution 7 - Javascript	abe kur	View Answer on Stackoverflow
Solution 8 - Javascript	meol	View Answer on Stackoverflow
Solution 9 - Javascript	user2765479	View Answer on Stackoverflow
Solution 10 - Javascript	elasticrash	View Answer on Stackoverflow
Solution 11 - Javascript	Stephen Quan	View Answer on Stackoverflow
Solution 12 - Javascript	tsadkan yitbarek	View Answer on Stackoverflow
Solution 13 - Javascript	Mohammadreza	View Answer on Stackoverflow
Solution 14 - Javascript	Leo Lanese	View Answer on Stackoverflow
Solution 15 - Javascript	keroles Monsef	View Answer on Stackoverflow
Solution 16 - Javascript	mwangaben	View Answer on Stackoverflow
Solution 17 - Javascript	gandharv garg	View Answer on Stackoverflow
Solution 18 - Javascript	MD SHAYON	View Answer on Stackoverflow
Solution 19 - Javascript	Deathstalker	View Answer on Stackoverflow
Solution 20 - Javascript	David_	View Answer on Stackoverflow
Solution 21 - Javascript	MD SHAYON	View Answer on Stackoverflow
Solution 22 - Javascript	Mahima Agrawal	View Answer on Stackoverflow
Solution 23 - Javascript	Max	View Answer on Stackoverflow
Solution 24 - Javascript	user8909781	View Answer on Stackoverflow
Solution 25 - Javascript	Hari Lakkakula	View Answer on Stackoverflow
Solution 26 - Javascript	Mohammad Fathi MiMFa	View Answer on Stackoverflow
Solution 27 - Javascript	Aathi	View Answer on Stackoverflow
Solution 28 - Javascript	abhisekpaul	View Answer on Stackoverflow
Solution 29 - Javascript	Mohammed Kamran Azam	View Answer on Stackoverflow
Solution 30 - Javascript	Sanjay Bharwani	View Answer on Stackoverflow
Solution 31 - Javascript	Vinod kumar	View Answer on Stackoverflow
Solution 32 - Javascript	Navnath jagdale	View Answer on Stackoverflow