Map data from array within a nested object

Question

My goal is to map the length of the skills array for each user.

I start with this bit of JSON here:

    const txt = `{
    "Alex": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 30
    },
    "Asab": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "Redux",
            "MongoDB",
            "Express",
            "React",
            "Node"
        ],
        "age": 25,
        "isLoggedIn": false,
        "points": 50
    },
    "Brook": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React",
            "Redux"
        ],
        "age": 30,
        "isLoggedIn": true,
        "points": 50
    },
    "Daniel": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "Python"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    },
    "John": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React",
            "Redux",
            "Node.js"
        ],
        "age": 20,
        "isLoggedIn": true,
        "points": 50
    },
    "Thomas": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    },
    "Paul": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "MongoDB",
            "Express",
            "React",
            "Node"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    }
}
`

I then parse it to the userObj variable:

const userObj = JSON.parse(txt, undefined);

Now this is where things get odd,

for (let user in userObj) {
  console.log(user); //returns several strings, rather than the objects themselves
}

and when I try to iterate over those objects, naturally I get unexpected results. I've tried many different approaches over the past few hours and haven't managed to implement anything that works.

Expected final result example:

{ 
Alex => 3,
Asab => 7,
Brooke => 5
}

Use userObj[user] to get the objects

evolutionxbox
– evolutionxbox

2022-07-01 13:15:45 +00:00
Commented Jul 1, 2022 at 13:15 — evolutionxbox
– evolutionxbox, Commented Jul 1, 2022 at 13:15

Andy · Accepted Answer · 2022-07-01 13:32:56Z

If the parsing worked it shouldn't do that. Here's a working example.

const txt='{"Alex":{"email":"[email protected]","skills":["HTML","CSS","JavaScript"],"age":20,"isLoggedIn":false,"points":30},"Asab":{"email":"[email protected]","skills":["HTML","CSS","JavaScript","Redux","MongoDB","Express","React","Node"],"age":25,"isLoggedIn":false,"points":50},"Brook":{"email":"[email protected]","skills":["HTML","CSS","JavaScript","React","Redux"],"age":30,"isLoggedIn":true,"points":50},"Daniel":{"email":"[email protected]","skills":["HTML","CSS","JavaScript","Python"],"age":20,"isLoggedIn":false,"points":40},"John":{"email":"[email protected]","skills":["HTML","CSS","JavaScript","React","Redux","Node.js"],"age":20,"isLoggedIn":true,"points":50},"Thomas":{"email":"[email protected]","skills":["HTML","CSS","JavaScript","React"],"age":20,"isLoggedIn":false,"points":40},"Paul":{"email":"[email protected]","skills":["HTML","CSS","JavaScript","MongoDB","Express","React","Node"],"age":20,"isLoggedIn":false,"points":40}}';

const users = JSON.parse(txt);

const out = {};

for (const user in users) {
  console.log(user);
  out[user] = users[user].skills.length;
}

console.log(out);

Jacob Stephenson · Accepted Answer · 2022-07-01 13:12:44Z

1

You can use Object.keys to do what you're looking for:

Object.keys(userObj).map((user) => {
  const userString = `${user} => ${userObj[user].skills.length}`;
  console.log(userString);
});

Results in:

Alex => 3
Asab => 8
Brook => 5
Daniel => 4
John => 6
Thomas => 4
Paul => 7

To accomplish this, map over each of userObj's keys, which are the users names, allowing us to access each user objects values, then we simply create our output string!

answered Jul 1, 2022 at 13:12

Jacob Stephenson

5824 silver badges14 bronze badges

1 Comment

conradQQ Over a year ago

Solid answer. Thank you.

dixylo · Accepted Answer · 2022-07-01 13:23:28Z

1

The "for-in" loop returns a key in each iteration instead of the value of a field, so you should get the objects by userObj[user].

answered Jul 1, 2022 at 13:23

dixylo

688 bronze badges

Comments

exphoenee · Accepted Answer · 2022-07-01 13:24:21Z

First you should convert the JSON to an object. Then you should convert this object to an array, to map over that. But in th second step you can already print out to console anything.

const txt = `{
    "Alex": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 30
    },
    "Asab": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "Redux",
            "MongoDB",
            "Express",
            "React",
            "Node"
        ],
        "age": 25,
        "isLoggedIn": false,
        "points": 50
    },
    "Brook": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React",
            "Redux"
        ],
        "age": 30,
        "isLoggedIn": true,
        "points": 50
    },
    "Daniel": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "Python"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    },
    "John": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React",
            "Redux",
            "Node.js"
        ],
        "age": 20,
        "isLoggedIn": true,
        "points": 50
    },
    "Thomas": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    },
    "Paul": {
        "email": "[email protected]",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "MongoDB",
            "Express",
            "React",
            "Node"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    }
}
`
let userArr = [];
let users = JSON.parse(txt)
for (userName in users) {
  const user = {userName, skillNumber: 0};
  user.skillNumber = users[userName].skills.length
  userArr.push(user);
}

const res = userArr.map(user=>`${user.userName} -> ${user.skillNumber}`)
console.log(res);

Collectives™ on Stack Overflow

Map data from array within a nested object

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related