'JavaScript can I directly access to a property inside a property in the object?

In this object, I want to print out an array in the form of [userName, skills]. I know that these objects don't have indexes. Is it possible to detect the skills property and only print out the value of that?

const users = {
  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
  }
}

I first tried the code below but there was an error that it cannot read properties of undefined (reading 0).

let userId = Object.keys(users);  //(3) ['Alex', 'Asab', 'Brook']

for (let i = 0; i < userId.length; i++) {
  let userSkills = users.userId[i].skills;
  console.log(userId, userSkills);
}

Is it the only way that I check all the skills one by one like below?

console.log(users.Alex.skills);
console.log(users.Asab.skills);
console.log(users.Brooks.skills);


Solution 1:[1]

As said in comments, you should use bracket notation.

Links:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

https://javascript.info/object

Also, you can use this to shorten your code:

userId.forEach(user => console.log(users[user].skills));

About array methods you can read here:

https://javascript.info/array-methods

Solution 2:[2]

Try this, It will work for you

let userId = Object.keys(users);  //(3) ['Alex', 'Asab', 'Brook']
for (let i = 0; i < userId.length; i++) {
  let userSkills = users[userId[i]].skills;
}

Solution 3:[3]

const users = {
  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
  }
}

for (const element in users) {
  console.log(users[element].skills);
}

Solution 4:[4]

You can use Object.entries and map for it

const users = {
  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
  }
}

const resultArray = Object.entries(users).map(([user, {skills}]) => [user, skills])
const resultObject = Object.entries(users).map(([user, {skills}]) => ({user, skills}))

console.log(resultArray)
console.log(resultObject)

Solution 5:[5]

let userId = Object.keys(users);  //(3) ['Alex', 'Asab', 'Brook']

userId.forEach(u=> {
    console.log(users[u].skills);
});

Solution 6:[6]

You're almost there -

for (let i = 0; i < userId.length; i++) {
  let userSkills = users[userId[i]].skills;
  console.log(userId[i], userSkills);
}

Use Bracket Notation instead of Dot Notation. Because all the time dot notation is not acceptable. Like - .number, .dependingValue, .anyCalculation, numericValue.something

Javascript mixes up decimal.

Read more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

Solution 7:[7]

    for (name in users) {
      console.log([name, ...users[name].skills])
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Viktoriia Shvets
Solution 2 Parth
Solution 3 Mihir
Solution 4 R4ncid
Solution 5 Srinivasan Chennaiiq
Solution 6 Yadab Sutradhar
Solution 7 B_Joker