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

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!

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

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

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

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

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

Referencias

• Array.prototype.some ()
• Array.prototype.forEach ()
• Array.prototype.map ()
• Array.prototype.filter ()
• Array.prototype.sort ()
• Sintaxis extendida
• Array.prototype.find ()

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.

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

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

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

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

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

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

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

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

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.

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

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 (`)

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