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

Question

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: 'alex@alex.com',
    skills: ['HTML', 'CSS', 'JavaScript'],
    age: 20,
    isLoggedIn: false,
    points: 30
  },
  Asab: {
    email: 'asab@asab.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
    age: 25,
    isLoggedIn: false,
    points: 50
  },
  Brook: {
    email: 'daniel@daniel.com',
    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);

You can't use [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#dot_notation) with variables, you need to use [bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation). `let userSkills = users[userId[i]].skills;` (and it looks like you want to log just the current user per iteration, so `console.log(userId[i], userSkills);`) — pilchard, Apr 29 '22 at 09:55
duplicate: [JavaScript property access: dot notation vs. brackets?](https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets) — pilchard, Apr 29 '22 at 09:57

score 0 · Answer 1 · answered Apr 29 '22 at 10:05

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

score 0 · Answer 2 · answered Apr 29 '22 at 10:05

0

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;
}

answered Apr 29 '22 at 10:05

Parth

31
7

score 0 · Answer 3 · answered Apr 29 '22 at 10:07

0

const users = {
  Alex: {
    email: 'alex@alex.com',
    skills: ['HTML', 'CSS', 'JavaScript'],
    age: 20,
    isLoggedIn: false,
    points: 30
  },
  Asab: {
    email: 'asab@asab.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
    age: 25,
    isLoggedIn: false,
    points: 50
  },
  Brook: {
    email: 'daniel@daniel.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
    age: 30,
    isLoggedIn: true,
    points: 50
  }
}

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

answered Apr 29 '22 at 10:07

Mihir

64
4

`for...in` is not as clearcut as this as it will also iterate inherited properties. see my comment on @B_Joker s answer. – pilchard Apr 29 '22 at 10:08
it will iterate only thru enumerable props so the solution is valid for the case. – B_Joker Apr 29 '22 at 10:29

score 0 · Answer 4 · answered Apr 29 '22 at 10:10

You can use Object.entries and map for it

const users = {
  Alex: {
    email: 'alex@alex.com',
    skills: ['HTML', 'CSS', 'JavaScript'],
    age: 20,
    isLoggedIn: false,
    points: 30
  },
  Asab: {
    email: 'asab@asab.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
    age: 25,
    isLoggedIn: false,
    points: 50
  },
  Brook: {
    email: 'daniel@daniel.com',
    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)

score 0 · Answer 5 · answered Apr 29 '22 at 10:12

0

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

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

answered Apr 29 '22 at 10:12

Srinivasan Chennaiiq

1

score 0 · Answer 6 · answered Apr 29 '22 at 10:45

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

score -1 · Answer 7 · answered Apr 29 '22 at 10:00

-1

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

answered Apr 29 '22 at 10:00

B_Joker

99
5

Don't just post code unrelated to the errors the OP is encountering. While this may output the desired result, take the time to explain what you have done with links to relevant documentation when appropriate. The OP's code is fine, if a little round about, but is not working due to a minor syntax error which when learned will lead to better understanding in general. Also `for...in` may lead to other, unexpected outcomes [Iterating over own properties only](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#iterating_over_own_properties_only) – pilchard Apr 29 '22 at 10:03

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

7 Answers7