How can I use JavaScript or jQuery to modify the value of an object that is contained within an array?

Problem

The following code is taken 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"
    }
];

I’d like to update the desc value of jquery-ui, for example. I’m not sure how I’m going to accomplish it.

Is there a faster way to get the data as well? I mean, just like the object inside an array, give the object a name to get its data? So anything along the lines of jquery-ui.jquery-ui.desc =….

Asked by qinHaiXiang

Solution #1

It’s quite straightforward.

Answered by Umair Ahmed

Solution #2

You must conduct a search in the array in the following manner:

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 put it to good use

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

UPDATE:

To acquire it faster, do the following:

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

projects.jqueryUi.desc = 'new string';

(According to Frédéric’s reply, you should use “jquery-ui” and projects[“jquery-ui”] notation instead of hyphen in the object key.)

Answered by Aston

Solution #3

Thanks to ES6, this is the best solution.

This produces a new array with a replaced description for the object with a value of “jquery-ui.”

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

Answered by kintaro

Solution #4

Using map is the best solution without using extra libraries. (with 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
);

Answered by Ankit Kumar Rajpoot

Solution #5

The ES6 way, with no changes to the 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);

Answered by Bimal Grg

Post is based on https://stackoverflow.com/questions/4689856/how-to-change-value-of-object-which-is-inside-an-array-using-javascript-or-jquer