¿Cómo cambiar el valor del objeto que está dentro de una matriz usando JavaScript o jQuery?


Answers

Es bastante simple

  • Encuentra el índice del objeto usando el método findIndex .
  • Almacene el índice en variable.
  • Haga una actualización simple como esta: 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])

Question

El siguiente código proviene de la Autocompletar de jQuery UI:

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

Por ejemplo, quiero cambiar el valor desc de jquery-ui . ¿Cómo puedo hacer eso?

Además, ¿hay una manera más rápida de obtener los datos? Me refiero a darle un nombre al objeto para obtener sus datos, al igual que el objeto dentro de una matriz? Entonces sería algo como jquery-ui.jquery-ui.desc = ....




Esta es mi respuesta al problema. Mi versión de guión bajo fue 1.7, por lo tanto, no pude usar .findIndex. Entonces obtuve manualmente el índice del artículo y lo reemplacé. Aquí está el código para el mismo.

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

El siguiente método reemplazará al estudiante con id: 4 con más atributos en el objeto

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 guión bajo 1.8 se simplificará ya que tenemos los métodos _.findIndexOf.




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




puedes usar .find así en tu ejemplo

   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'



Encuentre el índice primero:

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

Entonces:

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

Luego haz lo que quieras con este índice, como:

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

Nota: no use for, ya que for comprobará todos los documentos de la matriz, use while con un stopper, por lo que se detendrá una vez que se encuentre, por lo tanto, un código más rápido.