How to loop through an array containing objects and access their properties

Question

I want to cycle through the objects contained in an array and change the properties of each one  If I do this   for  var j   0  j  lt  myArray length  j      console log myArray j         The console should bring up every object in the array  right  But in fact it only displays the first object  if I console log the array outside of the loop  all the objects appear so there s definitely more in there   Anyway  here s the next problem  How do I access  for example Object1 x in the array  using the loop   for  var j   0  j  lt  myArray length  j      console log myArray j x         This returns  undefined   Again the console log outside the loop tells me that the objects all have values for  x   How do I access these properties in the loop   I was recommended elsewhere to use separate arrays for each of the properties  but I want to make sure I ve exhausted this avenue first   Thank you

User · Answer

Looping through an array of objects is a pretty fundamental functionality. This is what works for me.

_x000D_

var person = [];_x000D_
person[0] = {_x000D_
  firstName: "John",_x000D_
  lastName: "Doe",_x000D_
  age: 60_x000D_
};_x000D_
_x000D_
var i, item;_x000D_
_x000D_
for (i = 0; i < person.length; i++) {_x000D_
  for (item in person[i]) {_x000D_
    document.write(item + ": " + person[i][item] + "<br>");_x000D_
  }_x000D_
}

_x000D_

User · Answer

This would work  Looping thorough array yourArray    Then loop through direct properties of each object  eachObj        yourArray forEach  function  eachObj       for  var key in eachObj            if  eachObj hasOwnProperty key               console log key eachObj key

User · Answer

Here s an example on how you can do it      x000D   x000D  var students      x000D      name   Mike   x000D      track   track-a   x000D      achievements  23  x000D      points  400  x000D       x000D      x000D      name   james   x000D      track   track-a   x000D      achievements  2  x000D      points  21  x000D       x000D    x000D   x000D  students forEach myFunction   x000D   x000D  function myFunction item  index    x000D    for  var key in item    x000D      console log item key   x000D      x000D    x000D   x000D   x000D

User · Answer

x000D   x000D  var c     x000D      myProperty    x000D            name   this     x000D            name   can     x000D            name   get     x000D            name   crazy    x000D        x000D     x000D   x000D  c myProperty forEach function myProperty element    x000D      var x   myProperty element name  x000D      console log  the name of the member is       x   x000D     x000D   x000D   x000D    This is one of the ways how I was able to achieve it

User · Answer

Here s another way of iterating through an array of objects  you need to include jQuery library in your document for these      each array  function element         do some operations with each element

User · Answer

Array object iteration  using jQuery   use the second parameter to print the string      each array  function index  item           console log index  item

User · Answer

for  var j   0  j  lt  myArray length  j       console log myArray j  x

User · Answer

This might help somebody  Maybe it s a bug in Node   var arr       name   a       name   b       name   c       var c   0    This doesn t work    while  arr c  name    c         TypeError  Cannot read property  name  of undefined   But this works     while  arr c     c         Inside the loop arr c  name works as expected    This works too     while   arr c    amp  amp   arr c  name     c        BUT simply reversing the order does not work  I m guessing there s some kind of internal optimization here that breaks Node    while   arr c  name   amp  amp   arr c      c        Error says the array is undefined  but it s not  -  Node v11 15 0

User · Answer

Use forEach its a built-in array function  Array forEach     yourArray forEach function  arrayItem        var x   arrayItem prop1   2      console log x

User · Answer

Accepted answer uses normal function  So posting the same code with slight modification using arrow function on forEach    yourArray forEach arrayItem   gt          var x   arrayItem prop1   2        console log x           Also in   each you can use arrow function like below     each array   item  index    gt           console log index  item

User · Answer

Some use cases of looping through an array in the functional programming way in JavaScript   1  Just loop through an array  const myArray     x 100    x 200    x 300     myArray forEach  element  index  array    gt        console log element x      100  200  300     console log index      0  1  2     console log array      same myArray object 3 times       Note  Array prototype forEach   is not a functional way strictly speaking  as the function it takes as the input parameter is not supposed to return a value  which thus cannot be regarded as a pure function   2  Check if any of the elements in an array pass a test  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   gt  person age  gt   18   console log anyAdult      true   3  Transform to a new array  const myArray     x 100    x 200    x 300     const newArray  myArray map element   gt  element x   console log newArray       100  200  300    Note  The map   method creates a new array with the results of calling a provided function on every element in the calling array   4  Sum up a particular property  and calculate its average  const myArray     x 100    x 200    x 300     const sum   myArray map element   gt  element x  reduce  a  b    gt  a   b  0   console log sum      600   0   100   200   300  const average   sum   myArray length  console log average      200   5  Create a new array based on the original but without modifying it  const myArray     x 100    x 200    x 300     const newArray  myArray map element   gt        return              element          x  element x   2             console log myArray       100  200  300  console log newArray       200  400  600    6  Count the number of each category  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    gt        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  Retrieve a subset of an array based on particular criteria  const myArray     x 100    x 200    x 300     const newArray   myArray filter element   gt  element x  gt  250   console log newArray        x 300      Note  The filter   method creates a new array with all elements that pass the test implemented by the provided function   8  Sort an array  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  Find an element in an array  const people      name   john   age 23                    name   john   age 43                    name   jim   age 101                    name   bob   age 67      const john   people find person   gt  person name      john    console log john       The Array prototype find   method returns the value of the first element in the array that satisfies the provided testing function   References   Array prototype some   Array prototype forEach   Array prototype map   Array prototype filter   Array prototype sort   Spread syntax Array prototype find

User · Answer

It s really simple using the forEach method since ES5   You can directly change each property of each object in your array   myArray forEach function  arrayElem      arrayElem   newPropertyValue        If you want to access a specific property on each object    myArray forEach function  arrayElem          arrayElem nameOfYourProperty   newPropertyValue

User · Answer

for  element in array        console log array element  property        This works

User · Answer

myArray j x  is logically incorrect   Use  myArray j  x   instead  for  var j   0  j  lt  myArray length  j       console log myArray j  x

User · Answer

x000D   x000D  const jobs     x000D        x000D          name   sipher   x000D          family   sipherplus   x000D          job   Devops  x000D         x000D        x000D          name   john   x000D          family   Doe   x000D          job   Devops  x000D         x000D        x000D          name   jim   x000D          family   smith   x000D          job   Devops  x000D        x000D     x000D   x000D  const txt    x000D        lt ul gt  x000D            jobs map job   gt    lt li gt   job name    job family  - gt    job job  lt  li gt    join      x000D       lt  ul gt   x000D    x000D   x000D  document body innerHTML   txt  x000D   x000D   x000D    Be careful about the back Ticks

User · Answer

I know it s been long but for anyone else encountering this issue  my problem is that I was looping through an array of arrays containing only one array  Like this     array snippet  returned from here    else      callback  results      And I was using the array like this for const result of results      console log result x     As you can see  the array I wanted to iterate over was actually inside another array  removing the square brackets helped  Node JS and MySQL

User · Answer

You can use a for  of loop to loop over an array of objects   for  let item of items        console log item      Will display contents of the object inside the array     One of the best things about for  of loops is that they can iterate over more than just arrays  You can iterate over any type of iterable  including maps and objects  Make sure you use a transpiler or something like TypeScript if you need to support older browsers   If you wanted to iterate over a map  the syntax is largely the same as the above  except it handles both the key and value   for  const  key  value  of items      console log value       I use for  of loops for pretty much every kind of iteration I do in Javascript  Furthermore  one of the coolest things is they also work with async await as well

[javascript] How to loop through an array containing objects and access their properties

Examples related to javascript

Examples related to arrays

Examples related to iteration