Como percorrer um array contendo objects e acessar suas propriedades

Eu quero percorrer os objects contidos em uma matriz e alterar as propriedades de cada um. Se eu fizer isso:

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

O console deve trazer todos os objects da matriz, certo? Mas, na verdade, só exibe o primeiro object. se eu consolar o log do array fora do loop, todos os objects aparecerão, então definitivamente há mais coisas lá.

De qualquer forma, aqui está o próximo problema. Como eu access, por exemplo, Object1.x na matriz, usando o loop?

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

Isso retorna “indefinido”. Novamente, o log do console fora do loop me diz que todos os objects possuem valores para “x”. Como eu access essas propriedades no loop?

Eu era recomendado em outros lugares para usar matrizes separadas para cada uma das propriedades, mas eu quero ter certeza de que eu escapei dessa avenida primeiro.

Obrigado!

Use forEach sua uma function de matriz interna. Array.forEach() :

 yourArray.forEach(function (arrayItem) { var x = arrayItem.prop1 + 2; console.log(x); }); 
 for (var j = 0; j < myArray.length; j++){ console.log(myArray[j].x); } 

No ECMAScript 2015, também conhecido como ES6, você pode usar um loop for..of para percorrer uma matriz de objects.

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

No momento de postar esta resposta, o suporte é praticamente inexistente para o Internet Explorer, mas através do uso de um transpilador como Traceur ou Babel, você pode usar novos resources de Javascript como este sem ter que se preocupar com o que os navegadores suportam.

Aqui está um exemplo de como você pode fazer isso 🙂

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

Alguns casos de uso de loop através de um array na forma de functional programming em JavaScript:

1. Basta percorrer uma 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 () não é uma maneira funcional, falando estritamente, já que a function que toma como o parâmetro de input não deve retornar um valor, o que, portanto, não pode ser considerado como uma function pura.

2. Verifique se algum dos elementos em uma matriz passa por um teste

 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. Transforme-se em uma nova matriz

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

Nota: O método map () cria uma nova matriz com os resultados da chamada de uma function fornecida em todos os elementos da matriz de chamada.

4. Resuma uma propriedade específica e calcule sua média

 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. Crie um novo array baseado no original mas sem modificá-lo

 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. Conte o número de cada categoria

 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 um subconjunto de uma matriz com base em critérios específicos

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

Nota: O método filter () cria uma nova matriz com todos os elementos que passam no teste implementado pela function fornecida.

8. Classifique uma 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); 

insira a descrição da imagem aqui

9. Encontre um elemento em uma 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); 

insira a descrição da imagem aqui

O método Array.prototype.find () retorna o valor do primeiro elemento na matriz que satisfaz a function de teste fornecida.

Referências

  • Array.prototype.some ()
  • Array.prototype.forEach ()
  • Array.prototype.map ()
  • Array.prototype.filter ()
  • Array.prototype.sort ()
  • Espalhe a syntax
  • Array.prototype.find ()

myArray[jx] está logicamente incorreto.

Use (myArray[j].x); em vez de

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

Looping através de uma matriz de objects é uma funcionalidade bastante fundamental. Isto é o que funciona para mim.

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

É muito simples usar o método forEach desde o ES5 +. Você pode alterar diretamente cada propriedade de cada object em sua matriz.

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

Se você quiser acessar uma propriedade específica em cada object:

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

Aqui está outra maneira de iterar através de uma matriz de objects (você precisa include a biblioteca jQuery em seu documento para estes).

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

Isso funcionaria. Looping minucioso array (yourArray). Em seguida, percorra as propriedades diretas de cada object (eachObj).

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

Iteração de object Array, usando jQuery, (use o segundo parâmetro para imprimir a string).

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