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

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 = ....

32 Answers

1 2 Next

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

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

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

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

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

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

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' 

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.

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

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

Docs:

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

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

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

I think this way is better

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

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} // ]

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

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 ' }) 

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

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

Change value with conditions using for each loop

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

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

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

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" 

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

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

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.

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

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..

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

to update multiple items with the matches use:

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

Try this code. it uses jQuery grep function

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

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.

1 2 Next