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

Sie können verwenden $.each() um das Array zu durchlaufen und das gewünschte Objekt ausfindig zu machen:

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

Answer 2

Angesichts der folgenden Daten wollen wir Folgendes ersetzen Beeren im summerFruits Liste mit Wassermelone .

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

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

Sie können dies auf zwei Arten tun.

Erster Ansatz:

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

Zweiter Ansatz: Verwendung von map et spread :

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

summerFruitsCopy Liste wird nun ein Array mit dem aktualisierten Objekt zurückgeben.

Answer 3

Sie können .find so in Ihrem Beispiel verwenden

   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'

Answer 4

Das ist mit der underscore/lodash-Bibliothek leicht zu bewerkstelligen:

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

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

Answer 5

Dies ist eine weitere Antwort mit find . Dies beruht auf der Tatsache, dass find :

• durchläuft jedes Objekt im Array, BIS eine Übereinstimmung gefunden wird
• jedes Objekt wird Ihnen zur Verfügung gestellt und ist VERÄNDERBAR

Hier ist das kritische Javascript-Snippet:

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

Hier ist eine alternative Version des gleichen Javascript:

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

Hier ist eine noch kürzere (und etwas bösere) Version:

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

Hier ist eine voll funktionsfähige 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 ) );