Cómo recorrer una matriz que contiene objetos y acceder a sus propiedades


189

Quiero recorrer los objetos contenidos en una matriz y cambiar las propiedades de cada uno. Si hago esto:

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

La consola debería mostrar todos los objetos de la matriz, ¿verdad? Pero, de hecho, solo muestra el primer objeto. si la consola registra la matriz fuera del bucle, aparecerán todos los objetos, por lo que definitivamente hay más allí.

De todos modos, aquí está el siguiente problema. ¿Cómo accedo, por ejemplo, a Object1.x en la matriz, usando el bucle?

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j.x]);

}

Esto devuelve "indefinido". Nuevamente, el registro de la consola fuera del ciclo me dice que todos los objetos tienen valores para "x". ¿Cómo accedo a estas propiedades en el bucle?

Me recomendaron en otro lugar usar matrices separadas para cada una de las propiedades, pero quiero asegurarme de haber agotado esta avenida primero.

¡Gracias!


2
¿Puedes publicar una muestra de tu matriz? El primer fragmento de código parece correcto.
Sirko

jes un numero Lo definiste en la parte superior de tu bucle.

2
¿Quizás myArrayno es realmente solo una matriz después de todo?
techfoobar

necesitamos más información sobre cómo se construye
myArray

Con todas las respuestas siguientes y con una respuesta aceptada, nadie explica por qué ocurre el problema y cómo resolverlo con for loop. #forEachtrabajos. Pero la pregunta era sobre el bucle.
FreeLightman

Respuestas:


341

Utilice forEach es una función de matriz incorporada. Array.forEach():

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});

2
Me alegro de ayudar ... JavaScript se está volviendo bastante genial ... además, forEach es mucho mejor y más fácil de leer los bucles complejos ...
Dory Zidon

3
Me temo que forEachno es compatible con IE 9. ¡No me culpes! ¡El producto de mi empleador apoya eso!
fatCop

1
@DoryZidon: forEach no admite interrupción o detención - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Ankur Loriya

2
Tenga en cuenta que es importante que realmente tenga una matriz. Si obtuvieras yourArrayalgo así document.getElementsByClassNamesería una colección HTMLC, no una matriz. Entonces esta pregunta podría ser útil.
J0ANMM

Nota: forEachestá bloqueando y no es compatible await. El for...ofbucle lo hará.
PotatoFarmer

108

Algunos usan casos de bucle a través de una matriz en la forma de programación funcional en JavaScript:

1. Solo recorre una matriz

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

Nota: Array.prototype.forEach () no es una forma funcional estrictamente hablando, ya que la función que toma como parámetro de entrada no debe devolver un valor, por lo que no puede considerarse como una función pura.

2. Compruebe si alguno de los elementos de una matriz pasa una prueba

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Transformar a una nueva matriz

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Nota: El método map () crea una nueva matriz con los resultados de invocar una función proporcionada en cada elemento de la matriz que realiza la llamada.

4. Resume una propiedad particular y calcula su promedio

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Cree una nueva matriz basada en el original pero sin modificarlo

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Cuenta el número de cada categoría

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Recupere un subconjunto de una matriz en función de criterios particulares

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Nota: El método filter () crea una nueva matriz con todos los elementos que pasan la prueba implementada por la función proporcionada.

8. Ordenar una matriz

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

ingrese la descripción de la imagen aquí

9. Encuentra un elemento en una matriz

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

ingrese la descripción de la imagen aquí

El método Array.prototype.find () devuelve el valor del primer elemento de la matriz que satisface la función de prueba proporcionada.

Referencias


1
Esta es una referencia fantástica: ¿es original para esta pregunta o tiene algo como esto alojado en otro lugar?
Salvatore

Muy bien explicada y respuesta completa, gracias por contribuir.
Erica Summers

hola, si quiero mostrar todo el nombre y luego hacer una comparación, ¿sabes cómo hacerlo?
dipgirl

@dipgirl, ¿es algo como abajo? const people = [ {name: "john", age:23}, {name: "john", age:43}, {name: "jim", age:101}, {name: "bob", age:67} ]; const sortByAge = people.map(p => { console.log(p.name) return p }).sort(function (p1, p2) { return p1.age - p2.age; }); console.log(sortByAge);
Yuci

1
Felicidades por el voto número 100 :)
Syed

46

Puede usar un bucle for..of para recorrer una matriz de objetos.

for (let item of items) {
    console.log(item); // Will display contents of the object inside the array
}

Una de las mejores cosas de for..of bucles es que pueden iterar en más que solo matrices. Puede iterar sobre cualquier tipo de iterable, incluidos mapas y objetos. Asegúrese de utilizar un transpiler o algo como TypeScript si necesita admitir navegadores más antiguos.

Si desea iterar sobre un mapa, la sintaxis es en gran medida la misma que la anterior, excepto que maneja tanto la clave como el valor.

for (const [key, value] of items) {
  console.log(value);
}

Utilizo for..ofbucles para casi todo tipo de iteraciones que hago en Javascript. Además, una de las mejores cosas es que también funcionan con async / wait.


29
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

Sin embargo, esa es solo la solución para la segunda pregunta.
Sirko

18

Aquí hay un ejemplo de cómo puedes hacerlo :)

var students = [{
    name: "Mike",
    track: "track-a",
    achievements: 23,
    points: 400,
  },
  {
    name: "james",
    track: "track-a",
    achievements: 2,
    points: 21,
  },
]

students.forEach(myFunction);

function myFunction(item, index) {
  for (var key in item) {
    console.log(item[key])
  }
}


¿cómo obtendría el valor de la trackpropiedad para cada elemento y lo asignaría a una variable para usar o interpolar en otra parte del código?
Chris22

7

Recorrer una matriz de objetos es una funcionalidad bastante fundamental. Esto es lo que funciona para mí.

var person = [];
person[0] = {
  firstName: "John",
  lastName: "Doe",
  age: 60
};

var i, item;

for (i = 0; i < person.length; i++) {
  for (item in person[i]) {
    document.write(item + ": " + person[i][item] + "<br>");
  }
}


6

myArray[j.x] es lógicamente incorrecto

Utilizar en su (myArray[j].x);lugar

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

@ Cyborgx37 Oh .. Quiero decir, jx se trata como un nombre de variable que es incorrecto.
Vivek Sadh

5

Es realmente simple usar el método forEach desde ES5 +. Puede cambiar directamente cada propiedad de cada objeto en su matriz.

myArray.forEach(function (arrayElem){ 
  arrayElem = newPropertyValue;
});

Si desea acceder a una propiedad específica en cada objeto:

myArray.forEach(function (arrayElem){ 
      arrayElem.nameOfYourProperty = newPropertyValue;
    });

4

Aquí hay otra forma de iterar a través de una matriz de objetos (debe incluir la biblioteca jQuery en su documento para estos).

$.each(array, function(element) {
  // do some operations with each element... 
});

1
A su respuesta le falta información crítica sobre la necesidad de cargar la biblioteca jQuery para usar el $.eachmétodo.
Matthew Morek

4

Esto funcionaria. Matriz completa de bucle (yourArray). Luego recorra las propiedades directas de cada objeto (eachObj).

yourArray.forEach( function (eachObj){
    for (var key in eachObj) {
        if (eachObj.hasOwnProperty(key)){
           console.log(key,eachObj[key]);
        }
    }
});

2

Array iteración de objetos, usando jQuery, (use el segundo parámetro para imprimir la cadena).

$.each(array, function(index, item) {
       console.log(index, item);
});

2

var c = {
    myProperty: [
        { name: 'this' },
        { name: 'can' },
        { name: 'get' },
        { name: 'crazy' }
    ]
};

c.myProperty.forEach(function(myProperty_element) {
    var x = myProperty_element.name;
    console.log('the name of the member is : ' + x);
})

Esta es una de las formas en que pude lograrlo.


1

La respuesta aceptada utiliza la función normal. Entonces, publicar el mismo código con una ligera modificación usando la función de flecha en forEach

  yourArray.forEach(arrayItem => {
      var x = arrayItem.prop1 + 2;
      console.log(x);
  });

También en $ .cada uno puede usar la función de flecha como a continuación

 $.each(array, (item, index) => {
       console.log(index, item);
 });

1

const jobs = [
    {
        name: "sipher",
        family: "sipherplus",
        job: "Devops"
    },
    {
        name: "john",
        family: "Doe",
        job: "Devops"
    },
    {
        name: "jim",
        family: "smith",
        job: "Devops"
    }
];

const txt = 
   ` <ul>
        ${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
    </ul>`
;

document.body.innerHTML = txt;

Tenga cuidado con las garrapatas traseras (`)


0

Esto podría ayudar a alguien. Tal vez es un error en el nodo.

var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;

Esto no funciona:

while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined

Pero esto funciona ...

while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.

Esto también funciona ...

while ((arr[c]) && (arr[c].name)) { c++; }

PERO simplemente revertir el orden no funciona. Supongo que hay algún tipo de optimización interna aquí que rompe Node.

while ((arr[c].name) && (arr[c])) { c++; }

El error dice que la matriz no está definida, pero no lo es: - / Node v11.15.0

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.