Come modificare il valore dell'oggetto che si trova all'interno di un array usando JavaScript o jQuery?


201

Il codice seguente proviene dal completamento automatico dell'interfaccia utente 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"
    }
];

Ad esempio, voglio cambiare il valore di desc di jquery-ui . Come lo posso fare?

Inoltre, c'è un modo più veloce per ottenere i dati? Voglio dire dare all'oggetto un nome per recuperare i suoi dati, proprio come l'oggetto all'interno di un array? Quindi sarebbe qualcosa di similejquery-ui.jquery-ui.desc = ....


Dovresti trasformare l'array in un oggetto Javascript per utilizzare la sintassi projects["jquery-ui"].desc. Ne varrebbe la pena solo per ottenere una sintassi migliore?
Frédéric Hamidi,

Ho aggiornato la mia soluzione con la tua ultima domanda. E puoi usare la notazione "projects.jquery-ui.desc".
Aston,

Risposte:


135

Devi cercare nell'array come:

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

e usalo come

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

AGGIORNARE:

Per farlo più velocemente:

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

projects.jqueryUi.desc = 'new string';

(Secondo il commento di Frédéric non dovresti usare il trattino nella chiave dell'oggetto, oppure dovresti usare la notazione "jquery-ui" e progetti ["jquery-ui"]).


C'è un modo molto più veloce per ottenere i dati? Voglio dire dare un nome all'oggetto per recuperare i suoi dati. Proprio come l'oggetto all'interno dell'array. Quindi, posso usare in quel modo: jquery-ui.jquery-ui.desc = ....
qinHaiXiang

2
l'aggiornamento non funzionerà a causa del trattino -nel nome dell'oggetto. Dovresti scrivere "jquery-ui": {}e projects["jquery-ui"].descrispettivamente.
Frédéric Hamidi,

Grazie, non lo sapevo.
Aston,

guarda la risposta dell'abe kur, che è giusto, questo e gli altri sono lunghi
stackdave

231

È abbastanza semplice

  • Trova l'indice dell'oggetto usando il findIndexmetodo
  • Memorizza l'indice in variabile.
  • Fai un semplice aggiornamento come questo: 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
Qual è il motivo del doppio ()del findIndexmetodo?
Terkhos,

3
muterà myArray.
Bimal Grg,

1
Sì, ma se non vuoi mutare. [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], myArray.slice(objIndex + 1))]
Umair Ahmed,

1
@UmairAhmed Il codice sopra riportato non dovrebbe essere [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], ...myArray.slice(objIndex + 1))]? Penso che manchi la seconda ellissi.
Craig,

1
amo quanto sia pulito!
tdelam,

57

Modo ES6 , senza mutare i dati originali.

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

54

La migliore soluzione, grazie a ES6.

Ciò restituisce un nuovo array con una descrizione sostituita per l'oggetto che contiene un valore uguale a "jquery-ui".

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

1
In effetti la migliore soluzione reale! Grazie.
Frederiko Cesar,

1
@FrederikoCesar non in tutti i casi, iterare su ogni oggetto costa più che tagliare la matrice e iniettare il nuovo oggetto usando l'operatore spread
Maged Mohamed

cosa succede se si desidera modificare il valore al volo? Senza creare un'altra var? Il modo migliore è il metodo dell'indice: const targetIndex = summerFruits.findIndex (f => f.id === 3);
Thanasis,

37

Puoi usare $ .each () per scorrere sull'array e individuare l'oggetto che ti interessa:

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

36

L'uso di map è la soluzione migliore senza usare librerie extra. (Usando 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

È facilmente realizzabile con la libreria underscore / lodash:

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

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


Cosa succede se 'jquery-ui' non viene trovato dalla funzione find?
Mika,

Proprietà 'trovare' non esiste sul tipo 'LoDashExplicitArrayWrapper'
AndrewBenjamin

Il risultato di tali sequenze deve essere scartato con il valore _ #. lodash.com/docs/4.17.4#chain .value()
p0k8_

17

puoi usare .find così nel tuo esempio

   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'

Sorprendente! +1
Mike Musni,

12

devi conoscere l'indice dell'oggetto che stai cambiando. allora è piuttosto semplice

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

8

Penso che questo sia meglio

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

nel tuo findIndexstai assegnando un valore invece di confrontare
valanga1

6

dato i seguenti dati, vogliamo sostituire le bacche nella summerFruitslista con anguria .

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

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

Due modi per farlo.

Primo approccio:

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

Secondo approccio: utilizzo mape spread:

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

summerFruitsCopy l'elenco ora restituirà un array con oggetto aggiornato.


Il primo metodo è il migliore. Non c'è bisogno di spostarsi su un altro var e poi indietro. Metodo al volo. Ho votato a favore la tua soluzione.
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)];


questo ...prima che i progetti siano necessari?
lazzy_ms,

@lazzy_ms ...è noto come operatore di diffusione. google it :)
rmcsharry,

4

Questa è un'altra risposta che coinvolge find. Ciò si basa sul fatto che find:

  • scorre ogni oggetto nell'array Fintanto che non viene trovata una corrispondenza
  • ogni oggetto ti viene fornito ed è modificabile

Ecco il frammento Javascript critico:

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

Ecco una versione alternativa dello stesso Javascript:

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

Ecco una versione ancora più breve (e un po 'più malvagia):

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

Ecco una versione completa funzionante:

  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

Puoi usare la funzione mappa -

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

Prova questo codice. utilizza la funzione jQuery grep

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

0

Possiamo anche usare la funzione map di Array per modificare l'oggetto di un array usando Javascript.

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

changeDesc('jquery', 'new description')

questo restituirà [null, oggetto con il valore aggiornato, null]
Fernando Caride,

0

Trova prima l'indice:

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

Poi:

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

Quindi fai quello che vuoi con questo indice, come:

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

Nota: non utilizzare per, poiché per controllerà tutti i documenti dell'array, utilizzare mentre con un tappo, quindi si fermerà una volta trovato, quindi codice più veloce.


0

Qui sto usando angolare js. In javascript puoi usare loop per trovare.

    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

per aggiornare più elementi con le partite utilizzare:

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

-1

Questa è la mia risposta al problema. La mia versione di sottolineatura era la 1.7 quindi non potevo usarla .findIndex.

Così ho ottenuto manualmente l'indice dell'articolo e l'ho sostituito. Ecco il codice per lo stesso.

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

Il metodo seguente sostituirà lo studente id:4con più attributi nell'oggetto

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

}

Con il carattere di sottolineatura 1.8 sarà semplificato poiché disponiamo di metodi _.findIndexOf.


-1

Ti consente di aggiornare il valore di array[2] = "data"

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

È una risposta o una domanda?
tabdiukov,

2
Hai aggiornato con successo il secondo elemento in quell'array nel modo più complicato possibile.
BlueWater86

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

1
Fornisci una descrizione della tua risposta.
Lajos Arpad,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.