'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:
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 |
