Wie ändere ich den Wert eines Objekts in einem Array mithilfe von JavaScript oder jQuery?


199

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

Zum Beispiel möchte ich den desc-Wert von jquery-ui ändern . Wie kann ich das machen?

Gibt es außerdem eine schnellere Möglichkeit, die Daten abzurufen? Ich meine, dem Objekt einen Namen geben, um seine Daten abzurufen, genau wie das Objekt in einem Array? Es wäre also so etwas wiejquery-ui.jquery-ui.desc = ....


Sie müssten das Array in ein Javascript-Objekt umwandeln, um die Syntax verwenden zu können projects["jquery-ui"].desc. Wäre das die Mühe wert, nur um eine schönere Syntax zu erhalten?
Frédéric Hamidi

Ich habe meine Lösung mit Ihrer neuesten Frage aktualisiert. Und Sie können die Notation "projects.jquery-ui.desc" verwenden.
Aston

Antworten:


135

Sie müssen im 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 benutze es gerne

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

AKTUALISIEREN:

Um es schneller zu bekommen:

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

projects.jqueryUi.desc = 'new string';

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


Gibt es einen viel schnelleren Weg, um die Daten zu erhalten? Ich meine, geben Sie dem Objekt einen Namen, um seine Daten abzurufen. Genau wie das Objekt innerhalb des Arrays. Also, kann ich auf diese Weise verwenden: jquery-ui.jquery-ui.desc = ....
qinHaiXiang

2
Ihr Update funktioniert aufgrund des Bindestrichs -im Objektnamen nicht. Sie müssten schreiben "jquery-ui": {}und projects["jquery-ui"].descjeweils.
Frédéric Hamidi

Danke, das wusste ich nicht.
Aston

Schauen Sie sich die Antwort von Abe Kur an, das ist richtig, dies und andere sind lang
Stackdave

228

Es ist ganz einfach

  • Suchen Sie den Index des Objekts mithilfe der findIndexMethode.
  • Speichern Sie den Index in einer Variablen.
  • Führen Sie ein einfaches Update wie folgt 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])


2
Gibt es einen Grund für das Doppelte ()der findIndexMethode?
Terkhos

3
es wird myArray mutieren.
Bimal Grg

1
Ja, aber wenn Sie nicht mutieren wollen. [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], myArray.slice(objIndex + 1))]
Umair Ahmed

1
@UmairAhmed Sollte der obige Code nicht sein [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], ...myArray.slice(objIndex + 1))]? Ich denke du vermisst die zweiten Ellipsen.
Craig

1
liebe wie sauber das ist!
tdelam

55

ES6- Weg, ohne die Originaldaten zu mutieren .

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

53

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

1
In der Tat die beste tatsächliche Lösung! Vielen Dank.
Frederiko Cesar

1
@FrederikoCesar nicht in allen Fällen kostet das Iterieren über jedes Objekt mehr als das Schneiden des Arrays und das Injizieren des neuen Objekts mit dem Spread-Operator
Maged Mohamed

Was ist, wenn Sie den Wert im laufenden Betrieb ändern möchten? Ohne eine weitere Variable zu erstellen? Der beste Weg ist die Indexmethode: const targetIndex = summerFruits.findIndex (f => f.id === 3);
Thanasis


34

Die Verwendung von map 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
);

19

Dies kann leicht mit der Unterstrich- / Lodash-Bibliothek erreicht werden:

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

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


Was ist, wenn 'jquery-ui' von der Suchfunktion nicht gefunden wird?
Mika

Die Eigenschaft 'find' existiert nicht für den Typ 'LoDashExplicitArrayWrapper'
AndrewBenjamin

Das Ergebnis solcher Sequenzen muss mit dem Wert _ # entpackt werden. lodash.com/docs/4.17.4#chain .value()
p0k8_

17

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'

Tolle! +1
Mike Musni

12

Sie müssen den Index des Objekts kennen, das Sie ändern. dann ist es ziemlich einfach

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

8

Ich denke, dieser Weg ist besser

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

in Ihrem findIndexweisen Sie einen Wert zu, anstatt zu vergleichen
Lawine1

6

Angesichts der folgenden Daten möchten wir die Beeren in der summerFruitsListe durch Wassermelonen ersetzen .

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

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

Zwei Möglichkeiten, wie Sie dies tun können.

Erste 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: Verwenden von mapund spread:

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

summerFruitsCopy list gibt nun ein Array mit aktualisiertem Objekt zurück.


Die erste Methode ist am besten. Sie müssen nicht zu einem anderen var und dann zurück wechseln. On-the-Fly-Methode. Ich habe Ihre Lösung gewählt.
Thanasis

4

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


das ...bevor projekte notwendig sind?
Lazy_ms

@lazzy_ms the ...ist als Spread-Operator bekannt. google it :)
rmcsharry

4

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

  • iteriert durch jedes Objekt im Array, bis eine Übereinstimmung gefunden wird
  • Jedes Objekt wird Ihnen zur Verfügung gestellt und ist modifizierbar

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 desselben 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:

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

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

console.log( JSON.stringify( projects, undefined, 2 ) );


3

Sie können die Kartenfunktion verwenden -

const answers = this.state.answers.map(answer => {
  if(answer.id === id) return { id: id, value: e.target.value }
  return answer
})

this.setState({ answers: answers })

0

Versuchen Sie diesen Code. Es verwendet die jQuery-Grep-Funktion

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

0

Wir können auch die Map-Funktion des Arrays verwenden, um das Objekt eines Arrays mithilfe von Javascript zu ändern.

function changeDesc(value, desc){
   projects.map((project) => project.value == value ? project.desc = desc : null)
}

changeDesc('jquery', 'new description')

dies wird zurückgeben [null, Objekt mit dem aktualisierten Wert, null]
Fernando Caride

0

Finden Sie zuerst den Index:

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

Dann:

console.log(getIndex($scope.rides, "_id", id));

Dann machen Sie mit diesem Index, was Sie wollen, wie:

$ scope [returnindex] .someKey = "someValue";

Hinweis: Bitte nicht für verwenden, da für alle Array-Dokumente überprüft wird. Verwenden Sie diese Option mit einem Stopper, damit sie angehalten wird, sobald sie gefunden wurde, wodurch der Code schneller wird.


0

Hier benutze ich eckige js. In Javascript können Sie for-Schleife verwenden, um zu finden.

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

-1

Um mehrere Elemente mit den Übereinstimmungen zu aktualisieren, verwenden Sie:

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

-1

Dies ist meine Antwort auf das Problem. Meine Unterstrichversion war 1.7, daher konnte ich sie nicht verwenden .findIndex.

Also habe ich den Artikelindex manuell abgerufen und ersetzt. Hier ist der Code dafür.

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

Die folgende Methode ersetzt den Schüler id:4durch weitere Attribute im Objekt

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

}}

Mit Unterstrich 1.8 wird es vereinfacht, da wir Methoden haben _.findIndexOf.


-1

Lassen Sie den Wert von aktualisieren array[2] = "data"

    for(i=0;i<array.length;i++){
      if(i == 2){
         array[i] = "data";
        }
    }

Ist das eine Antwort oder eine Frage?
Tabdiukov

2
Sie haben das zweite Element in diesem Array auf die komplizierteste Art und Weise erfolgreich aktualisiert.
BlueWater86

-1
let thismoth = moment(new Date()).format('MMMM');
months.sort(function (x, y) { return x == thismoth ? -1 : y == thismoth ? 1 : 0; });

1
Bitte geben Sie eine Beschreibung Ihrer Antwort.
Lajos Arpad
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.