web-dev-qa-db-fra.com

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

Le code ci-dessous provient de la saisie semi-automatique de l'interface utilisateur 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"
    }
];

Par exemple, je veux changer le valeur descendante 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 un nom à l'objet pour récupérer ses données, tout comme l'objet dans un tableau? Donc, ce serait quelque chose comme jquery-ui.jquery-ui.desc = ....

javascriptjqueryarrays
130
qinHaiXiang

Vous devez chercher 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' );

PDATE:

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 devriez pas utiliser de trait d'union dans la clé d'objet, ni utiliser les notations "jquery-ui" et projects ["jquery-ui"].)

93
Aston

C'est assez simple

  • Recherchez l'index de l'objet à l'aide de la méthode findIndex.
  • Stocke l'index dans la variable.
  • Faites une mise à jour simple comme ceci: 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])
155
Umair Ahmed

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";
    }
});
33
Frédéric Hamidi

ES6 manière, sans mutation 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);
30
Bimal Grg

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

Cela peut facilement être accompli avec la bibliothèque de soulignement/lodash:

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

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

17
user2765479

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

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

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'
7
abe kur
// 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)];
3
Leo Lanese

Je pense que ça va mieux

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

Vous pouvez utiliser la fonction map -

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

this.setState({ answers: answers })
1
gandharv garg

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

Puis faites ce que vous voulez avec cet index, comme:

$ scope [index.index] .someKey = "uneValeur";

Remarque: veuillez ne pas utiliser for, car for vérifie tous les documents du tableau, utilisez-le avec un bouchon, afin qu'il s'arrête une fois trouvé, donc un code plus rapide.

0
user8909781

Nous pouvons également utiliser la fonction map de 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')
0
Mahima Agrawal

Ici, j'utilise angular js. En javascript, vous pouvez utiliser la boucle for find.

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

Essayez ce code. il utilise la fonction jQuery grep

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