Wie ändert man den Wert eines Objekts, das sich innerhalb eines Arrays befindet, mit JavaScript oder jQuery?

Question

Der folgende Code stammt aus 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"
    }
];

Ich möchte zum Beispiel die desc Wert von jquery-ui . Wie kann ich das tun?

Gibt es außerdem eine schnellere Möglichkeit, die Daten zu erhalten? Ich meine, geben Sie dem Objekt einen Namen, um seine Daten zu holen, genau wie das Objekt innerhalb eines Arrays? Es wäre also etwas wie jquery-ui.jquery-ui.desc = ....

Answer 1

Es ist ganz einfach

• Suchen Sie den Index des Objekts mit findIndex método.
• Speichern Sie den Index in einer Variablen.

• Führen Sie eine einfache Aktualisierung wie diese durch: 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

Sie müssen in dem Array wie folgt suchen:

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

und verwenden Sie es wie

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

UPDATE:

Damit es schneller geht:

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

projects.jqueryUi.desc = 'new string';

(Gemäß Frédérics Kommentar sollten Sie keinen Bindestrich im Objektschlüssel verwenden, oder Sie sollten die Schreibweise "jquery-ui" und projects["jquery-ui"] verwenden).

Answer 3

Die beste Lösung, dank ES6.

Dies gibt ein neues Array mit einer ersetzten Beschreibung für das Objekt zurück, das einen Wert gleich "jquery-ui" enthält.

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

Answer 4

Die Verwendung von Maps ist die beste Lösung ohne zusätzliche Bibliotheken (mit 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

ES6 Weg, ohne mutierend Originaldaten.

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 sure to avoid incorrect replacement
// When specific item is not found
if (objIndex === -1) {
  return;
}

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