looping over objects in an array inside an object (with for...in)

Question

I have objects (people) inside an array (group) inside an object (data) like so:

const data = {
  g1 : [
    {"name" : "Jack", "age" : 32},
    {"name" : "Jill", "age" : 44}    
  ],
  g2 : [
    {"email" : "[email protected]", "city" : "Berlin", "age" : 14},
    {"email" : "[email protected]", "city" : "Stockholm", "age" : 22}
  ]
}

Say I want to console.log all age property values, I try:

for (const group in data) {
  for (const person of group) {
    console.log(person.age)
  }
}

This does not work. It seems for (const group in data) is only looping over the names of it's children. I assume I should not use for...in in this case, but what can I use? Or is it somehow possible to use for...in?

The reason I'm confused is because in for example PHP I could do:

<?php

$data = [
    "g1" => [
        [ "name" => "Jack", "age" => 32 ],
        [ "name" => "Jill", "age" => 44 ]
    ],
    "g2" => [
        [ "email" => "[email protected]", "city" => "Berlin", "age" => 14 ],
        [ "email" => "[email protected]", "city" => "Stockholm", "age" => 22 ]
    ]
];


foreach ( $data as $group ) {
    foreach ( $group as $person ) {
        echo $person[ 'age' ];
    }
}

and in would work.

You'd need const person of data[group] since group is the key. Another way is to use Object.values(data).forEach(group => group.forEach(person => console.log(person.age))); — user5734311
– user5734311, Commented Dec 27, 2019 at 17:08
Since you found out that the outer loop gets you "g1" and "g2", this is basically a dupe of stackoverflow.com/questions/4244896/… — user5734311
– user5734311, Commented Dec 27, 2019 at 17:12

Yousername · Accepted Answer · 2019-12-27 17:10:46Z

3

One easier way is:

const data = {
  g1: [{
      "name": "Jack",
      "age": 32
    },
    {
      "name": "Jill",
      "age": 44
    }
  ],
  g2: [{
      "email": "[email protected]",
      "city": "Berlin",
      "age": 14
    },
    {
      "email": "[email protected]",
      "city": "Stockholm",
      "age": 22
    }
  ]
};

console.log(Object.values(data).map(p => p.map(o => o.age)).flat());

answered Dec 27, 2019 at 17:10

Yousername

1,0126 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander van Oostenrijk · Accepted Answer · 2019-12-27 17:10:41Z

2

The for...in construct will provide you only with the keys of an object, not its values. In your outer loop:

for (const group in data) { ... }

... the variable group will be set to g1, then g2, not to the value of the group. To get the value (i.e., the person), you need to index the group:

for (const group in data) {
  for (const person of data[group]) {
    console.log(person.age)
  }
}

answered Dec 27, 2019 at 17:10

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

Comments

Nelson Teixeira · Accepted Answer · 2019-12-27 17:19:56Z

1

There is a much easier way:

const data = {
  g1 : [
    {"name" : "Jack", "age" : 32},
    {"name" : "Jill", "age" : 44}    
  ],
  g2 : [
    {"email" : "[email protected]", "city" : "Berlin", "age" : 14},
    {"email" : "[email protected]", "city" : "Stockholm", "age" : 22}
  ]
}

Object.values(data).forEach(group=>group.forEach(person=>console.log(person.age)));

Here's another version:

const data = {
  g1 : [
    {"name" : "Jack", "age" : 32},
    {"name" : "Jill", "age" : 44}    
  ],
  g2 : [
    {"email" : "[email protected]", "city" : "Berlin", "age" : 14},
    {"email" : "[email protected]", "city" : "Stockholm", "age" : 22}
  ]
}

Object.entries(data).forEach(
  group=>group[1].forEach(
    person=>console.log(
        group[0], 
        person.name ? person.name : person.email, 
        person.age)
  )
);

Object.entries return the list of properties and values in an object in an array, i.e., [[prop, val], [prop, val], ...].

So if you use forEach in it, the 0 index will be prop name, and 1 index will be value. This explains the

    Object.entries(data).forEach(
      group=>group[1]

part. So now we have the group name, and the val which is an array of persons. Then you can just iterate it with another forEach and get age property:

   [...]group[1].forEach(
           person=>console.log(person.age));

I just elaborated it a bit to get more relevant information with

   [...]group[1].forEach(
       person=>console.log(
           group[0], 
           person.name ? person.name : person.email, 
           person.age)
       )
    ) [...]

edited Dec 27, 2019 at 17:19

answered Dec 27, 2019 at 17:09

Nelson Teixeira

6,6366 gold badges46 silver badges90 bronze badges

2 Comments

Nelson Teixeira Over a year ago

@ArthurVaïsse Better now ?

Arthur Vaïsse Over a year ago

Yep! It is better this way. I still consider the for loop as way more explicit and simpler to tackle this simple problem though. I would only prefer functional style if I were needing some mapping or filtering on the dataset.

user12603016 · Accepted Answer · 2019-12-27 17:51:16Z

1

Let's try something clean and simple.

const data = {
  g1 : [
    {"name" : "Jack", "age" : 32},
    {"name" : "Jill", "age" : 44}    
  ],
  g2 : [
    {"email" : "[email protected]", "city" : "Berlin", "age" : 14},
    {"email" : "[email protected]", "city" : "Stockholm", "age" : 22}
  ]
}

consoleAllAges = obj => {
    for (i in obj) {
        const group = obj[i];
        group.forEach(person => {
            console.log(person.age);
        });
    }
}

answered Dec 27, 2019 at 17:51

user12603016

Comments

Mr. · Accepted Answer · 2019-12-28 05:51:28Z

1

many answers here advise using different methods but do not address your issue, or what was missing in your implementation for the ages to be printed.

what you were missing is accessing the values of the group, which you iterate.

try this:

for (const group in data) {
  for (const person of data[group]) {
    console.log(person.age)
  }
}

which will output

edited Dec 28, 2019 at 5:51

answered Dec 27, 2019 at 17:20

Mr.

10.2k14 gold badges67 silver badges93 bronze badges

Comments

Saurav · Accepted Answer · 2019-12-27 17:25:43Z

0

group is an An Array and not An Object. Instead try this

    for (const group in data) {
  for (const person of data[group]) {
    console.log(person.age)
  }
}

edited Dec 27, 2019 at 17:25

answered Dec 27, 2019 at 17:20

Saurav

1978 bronze badges

1 Comment

Mr. Over a year ago

there is no need for string interpolation

fubar · Accepted Answer · 2019-12-27 17:33:32Z

0

You can use Object.values(data) to return the two arrays g1 and g2 in one array. Then you want to use flat() for this array which will give you a single array with all the people inside. Finally you want to call map() to iterate over this array. Since p.age is implicitly returned to map() it will return an array with all the returned values.

console.log(Object.values(data).flat().map(p=>p.age));

answered Dec 27, 2019 at 17:33

fubar

3732 silver badges11 bronze badges

Comments

Cak Sup · Accepted Answer · 2019-12-27 17:37:22Z

0

Strings correction

  g1 : [
    {"name" : "Jack", "age" : 32},
    {"name" : "Jill", "age" : 44}    
  ],
 g2 : [
    {"email" : "[email protected]", "city" : "Berlin", "age" : 14},
    {"email" : "[email protected]", "city" : "Stockholm", "age" : 22}
  ]
}

change string inside

answered Dec 27, 2019 at 17:37

Cak Sup

179 bronze badges

Collectives™ on Stack Overflow

looping over objects in an array inside an object (with for...in)

8 Answers 8

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related