Comment changer la valeur d'un objet qui se trouve à l'intérieur d'un tableau en utilisant JavaScript ou jQuery?

201

Le code ci-dessous provient de 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"
    }
];

Par exemple, je veux changer 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 à l'objet un nom pour récupérer ses données, tout comme l'objet à l'intérieur d'un tableau? Ce serait donc quelque chose commejquery-ui.jquery-ui.desc = ....

qinHaiXiang
la source
Vous devez transformer le tableau en objet Javascript pour utiliser la syntaxe projects["jquery-ui"].desc. Est-ce que cela en valait la peine que d'obtenir une syntaxe plus agréable?
Frédéric Hamidi
J'ai mis à jour ma solution avec votre dernière question. Et vous pouvez utiliser la notation "projects.jquery-ui.desc".
Aston

Réponses:

135

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 trait d'union dans la clé d'objet, ou vous devez utiliser la notation "jquery-ui" et projects ["jquery-ui"].)

Aston
la source
Existe-t-il un moyen beaucoup plus rapide d'obtenir les données? Je veux dire donner à l'objet un nom pour aller chercher son data.Just comme l'objet à l' intérieur array.So, puis - je utiliser de cette façon: jquery-ui.jquery-ui.desc = ....
qinHaiXiang
2
votre mise à jour ne fonctionnera pas en raison du trait d'union -dans le nom de l'objet. Vous auriez à écrire "jquery-ui": {}et projects["jquery-ui"].descrespectivement.
Frédéric Hamidi
Merci, je ne le savais pas.
Aston
regardez la réponse de l'abe kur, c'est la bonne, celle-ci et les autres sont longues
stackdave
232

C'est assez simple

  • Recherchez l'index de l'objet à l'aide de la findIndexméthode.
  • Stockez l'index dans une 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])

Umair Ahmed
la source
2
Une raison du double ()sur la findIndexméthode?
Terkhos
3
il va muter myArray.
Bimal Grg
1
Oui, mais si vous ne voulez pas muter. [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], myArray.slice(objIndex + 1))]
Umair Ahmed
1
@UmairAhmed Le code ci-dessus ne devrait-il [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], ...myArray.slice(objIndex + 1))]pas être ? Je pense que vous manquez les deuxièmes ellipses.
Craig
1
j'adore combien c'est propre!
tdelam
57

Manière 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);
Bimal Grg
la source
54

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
);
kintaro
la source
1
En effet, la meilleure solution réelle! Merci.
Frederiko Cesar
1
@FrederikoCesar pas dans tous les cas, itérer sur chaque objet coûte plus cher que de découper le tableau et d'injecter le nouvel objet à l'aide de l'opérateur d'étalement
Maged Mohamed
que faire si vous souhaitez modifier la valeur à la volée? Sans créer une autre var? Le meilleur moyen est la méthode de l'index: const targetIndex = summerFruits.findIndex (f => f.id === 3);
Thanasis
37

Vous pouvez utiliser $ .each () pour parcourir le tableau et localiser l'objet qui vous intéresse:

$.each(projects, function() {
    if (this.value == "jquery-ui") {
        this.desc = "Your new description";
    }
});
Frédéric Hamidi
la source
36

Utiliser 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
);
Ankit Kumar Rajpoot
la source
19

C'est facilement réalisable avec la bibliothèque underscore / lodash:

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

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

user2765479
la source
Que faire si 'jquery-ui' n'est pas trouvé par la fonction find?
Mika
La propriété 'find' n'existe pas sur le type 'LoDashExplicitArrayWrapper'
AndrewBenjamin
Le résultat de ces séquences doit être déplié avec la valeur _ #. lodash.com/docs/4.17.4#chain .value()
p0k8_
17

vous pouvez utiliser .find donc dans votre exemple

   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'
abe kur
la source
Incroyable! +1
Mike Musni
12

vous devez connaître l'index de l'objet que vous modifiez. alors c'est assez simple

projects[1].desc= "new string";
elasticrash
la source
8

Je pense que c'est mieux ainsi

const index = projects.findIndex(project => project.value==='jquery-ui');
projects[index].desc = "updated desc";
tsadkan yitbarek
la source
dans votre findIndexvous attribuez une valeur au lieu de comparer
avalanche1
6

étant donné les données suivantes, nous voulons remplacer les baies de la summerFruitsliste par la pastèque .

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

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

Vous pouvez le faire de deux manières.

Première approche:

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

Deuxième approche: utiliser mapet spread:

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

summerFruitsCopy La liste retournera maintenant un tableau avec un objet mis à jour.

meol
la source
La première méthode est la meilleure. Pas besoin de passer à une autre var puis de revenir. Méthode à la volée. J'ai voté pour votre solution.
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)];

Leo Lanese
la source
cela ...avant que les projets ne soient nécessaires?
lazzy_ms
@lazzy_ms ...est connu sous le nom d'opérateur d'étalement. google it :)
rmcsharry
4

Ceci est une autre réponse impliquant find. Cela repose sur le fait que find:

  • parcourt chaque objet du tableau jusqu'à ce qu'une correspondance soit trouvée
  • chaque objet vous est fourni et est MODIFIABLE

Voici l'extrait critique de Javascript:

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

Voici une autre version du même Javascript:

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

Voici une version encore plus courte (et un peu plus diabolique):

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

Voici une version de travail complète:

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

Stephen Quan
la source
3

Vous pouvez utiliser la fonction de carte -

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

this.setState({ answers: answers })
gandharv garg
la source
0

Essayez ce code. il utilise la fonction jQuery grep

array = $.grep(array, function (a) {
    if (a.Id == id) {
        a.Value= newValue;
    }
    return a;
});
Mohammed Kamran Azam
la source
0

Nous pouvons également utiliser la fonction de carte d'Array pour modifier l'objet d'un tableau à l'aide de Javascript.

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

changeDesc('jquery', 'new description')
Mahima Agrawal
la source
cela retournera [null, objet avec la valeur mise à jour, null]
Fernando Caride
0

Recherchez d'abord l'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++;
        }
      }

Ensuite:

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

Faites ensuite ce que vous voulez avec cet index, comme:

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

Remarque: veuillez ne pas utiliser pour, car for vérifiera tous les documents du tableau, utilisez tout avec un bouchon, donc il s'arrêtera une fois qu'il sera trouvé, donc un code plus rapide.


la source
0

Ici, j'utilise des js angulaires. En javascript, vous pouvez utiliser for loop pour trouver.

    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");
    }
Hari Lakkakula
la source
-1

pour mettre à jour plusieurs éléments avec les correspondances, utilisez:

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

Ceci est ma réponse au problème. Ma version de soulignement était 1.7 donc je ne pouvais pas l'utiliser .findIndex.

J'ai donc obtenu manuellement l'index de l'article et l'ai remplacé. Voici le code pour la même chose.

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

La méthode ci-dessous remplacera l'élève id:4par plus d'attributs dans l'objet

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

}

Avec le soulignement 1.8, cela sera simplifié car nous avons des méthodes _.findIndexOf.

Sanjay Bharwani
la source
-1

Permettez-vous de mettre à jour la valeur de array[2] = "data"

    for(i=0;i<array.length;i++){
      if(i == 2){
         array[i] = "data";
        }
    }
Vinod kumar
la source
Est-ce une réponse ou une question?
tabdiukov
2
Vous avez mis à jour avec succès le 2e élément de ce tableau de la manière la plus compliquée possible.
BlueWater86
-1
let thismoth = moment(new Date()).format('MMMM');
months.sort(function (x, y) { return x == thismoth ? -1 : y == thismoth ? 1 : 0; });
Navnath jagdale
la source
1
Veuillez fournir une description de votre réponse.
Lajos Arpad