Comment changer la valeur de l'objet qui se trouve dans un tableau en utilisant JavaScript ou jQuery ?

Question

Le code ci-dessous provient de la saisie semi-automatique de l'interface utilisateur jQuery :

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

Par exemple, je souhaite modifier la valeur desc de jquery-ui . Comment puis je faire ça?

De plus, existe-t-il un moyen plus rapide d'obtenir les données ? Je veux dire donner un nom à l'objet pour récupérer ses données, tout comme l'objet à l'intérieur d'un tableau ? Ce serait donc quelque chose comme jquery-ui.jquery-ui.desc = ....

Answer 1

C'est assez simple

• Trouvez l'index de l'objet en utilisant la méthode findIndex .
• Stockez l'index dans la variable.
• Faites une simple mise à jour comme celle-ci : 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])

Answer 2

Vous devez rechercher dans le tableau comme :

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

et l'utiliser comme

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

METTRE À JOUR:

Pour l'obtenir plus rapidement :

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

projects.jqueryUi.desc = 'new string';

(Selon le commentaire de Frédéric, vous ne devez pas utiliser de tiret dans la clé d'objet, ou vous devez utiliser la notation "jquery-ui" et projects["jquery-ui"].)

Answer 3

La meilleure solution, grâce à ES6.

Cela renvoie un nouveau tableau avec une description remplacée pour l'objet qui contient une valeur égale à "jquery-ui".

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

Answer 4

L'utilisation de la carte est la meilleure solution sans utiliser de bibliothèques supplémentaires. (en utilisant 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
);

Answer 5

façon ES6 , sans muter les données d'origine.

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