Looping over an collection where the key is an ID, and the value is a user class
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
In my react component I am trying to display a select dropdown list by looping over my users collection:
{users.map(user => (
<option value={user.id}>user.username</option>
))}
The problem I am having is that my users collection is actually keyed with the userId, and then the value is the actual user class.
How can I loop over this type of object?
users: {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
javascript reactjs
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
add a comment |
In my react component I am trying to display a select dropdown list by looping over my users collection:
{users.map(user => (
<option value={user.id}>user.username</option>
))}
The problem I am having is that my users collection is actually keyed with the userId, and then the value is the actual user class.
How can I loop over this type of object?
users: {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
javascript reactjs
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
add a comment |
In my react component I am trying to display a select dropdown list by looping over my users collection:
{users.map(user => (
<option value={user.id}>user.username</option>
))}
The problem I am having is that my users collection is actually keyed with the userId, and then the value is the actual user class.
How can I loop over this type of object?
users: {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
javascript reactjs
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
In my react component I am trying to display a select dropdown list by looping over my users collection:
{users.map(user => (
<option value={user.id}>user.username</option>
))}
The problem I am having is that my users collection is actually keyed with the userId, and then the value is the actual user class.
How can I loop over this type of object?
users: {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
javascript reactjs
javascript reactjs
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
asked Jan 3 at 20:18
BlankmanBlankman
98.8k2706641043
98.8k2706641043
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You could map over the users by using Object.values( users )
{
Object.values( users ).map( user => (
<option key={user.id} value={user.id}>user.username</option>
))
}
This will map over all the inner values instead, and you don't have to use the indexer.
As a sample you could see this snippet
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
};
Object.values( users ).map( user => console.log( user ) );As rightly mentioned by Ionut Achim, when you are returning an array of items, make sure they have unique key property, to avoid side effects in your codes behavior ;)
answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
Don't forget to add thekeyfor each option.
– Ionut Achim
Jan 3 at 20:26
@IonutAchim Right, I added it with a link to the documentation of react, thanks :)
– Icepickle
Jan 3 at 20:29
add a comment |
It looks like you want Object.values:
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
console.log(Object.values(users))i.e.
{Object.values(users).map(user => (
<option value={user.id}>user.username</option>
))}
answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029216%2flooping-over-an-collection-where-the-key-is-an-id-and-the-value-is-a-user-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You could map over the users by using Object.values( users )
{
Object.values( users ).map( user => (
<option key={user.id} value={user.id}>user.username</option>
))
}
This will map over all the inner values instead, and you don't have to use the indexer.
As a sample you could see this snippet
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
};
Object.values( users ).map( user => console.log( user ) );As rightly mentioned by Ionut Achim, when you are returning an array of items, make sure they have unique key property, to avoid side effects in your codes behavior ;)
answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
Don't forget to add thekeyfor each option.
– Ionut Achim
Jan 3 at 20:26
@IonutAchim Right, I added it with a link to the documentation of react, thanks :)
– Icepickle
Jan 3 at 20:29
add a comment |
You could map over the users by using Object.values( users )
{
Object.values( users ).map( user => (
<option key={user.id} value={user.id}>user.username</option>
))
}
This will map over all the inner values instead, and you don't have to use the indexer.
As a sample you could see this snippet
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
};
Object.values( users ).map( user => console.log( user ) );As rightly mentioned by Ionut Achim, when you are returning an array of items, make sure they have unique key property, to avoid side effects in your codes behavior ;)
answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
Don't forget to add thekeyfor each option.
– Ionut Achim
Jan 3 at 20:26
@IonutAchim Right, I added it with a link to the documentation of react, thanks :)
– Icepickle
Jan 3 at 20:29
add a comment |
You could map over the users by using Object.values( users )
{
Object.values( users ).map( user => (
<option key={user.id} value={user.id}>user.username</option>
))
}
This will map over all the inner values instead, and you don't have to use the indexer.
As a sample you could see this snippet
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
};
Object.values( users ).map( user => console.log( user ) );As rightly mentioned by Ionut Achim, when you are returning an array of items, make sure they have unique key property, to avoid side effects in your codes behavior ;)
answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
You could map over the users by using Object.values( users )
{
Object.values( users ).map( user => (
<option key={user.id} value={user.id}>user.username</option>
))
}
This will map over all the inner values instead, and you don't have to use the indexer.
As a sample you could see this snippet
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
};
Object.values( users ).map( user => console.log( user ) );As rightly mentioned by Ionut Achim, when you are returning an array of items, make sure they have unique key property, to avoid side effects in your codes behavior ;)
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
};
Object.values( users ).map( user => console.log( user ) );const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
};
Object.values( users ).map( user => console.log( user ) );answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
edited Jan 3 at 20:28
answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
answered Jan 3 at 20:22
IcepickleIcepickle
8,98732237
8,98732237
Don't forget to add thekeyfor each option.
– Ionut Achim
Jan 3 at 20:26
@IonutAchim Right, I added it with a link to the documentation of react, thanks :)
– Icepickle
Jan 3 at 20:29
add a comment |
Don't forget to add thekeyfor each option.
– Ionut Achim
Jan 3 at 20:26
@IonutAchim Right, I added it with a link to the documentation of react, thanks :)
– Icepickle
Jan 3 at 20:29
Don't forget to add the
key for each option.– Ionut Achim
Jan 3 at 20:26
Don't forget to add the
key for each option.– Ionut Achim
Jan 3 at 20:26
@IonutAchim Right, I added it with a link to the documentation of react, thanks :)
– Icepickle
Jan 3 at 20:29
@IonutAchim Right, I added it with a link to the documentation of react, thanks :)
– Icepickle
Jan 3 at 20:29
add a comment |
It looks like you want Object.values:
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
console.log(Object.values(users))i.e.
{Object.values(users).map(user => (
<option value={user.id}>user.username</option>
))}
answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
add a comment |
It looks like you want Object.values:
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
console.log(Object.values(users))i.e.
{Object.values(users).map(user => (
<option value={user.id}>user.username</option>
))}
answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
add a comment |
It looks like you want Object.values:
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
console.log(Object.values(users))i.e.
{Object.values(users).map(user => (
<option value={user.id}>user.username</option>
))}
answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
It looks like you want Object.values:
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
console.log(Object.values(users))i.e.
{Object.values(users).map(user => (
<option value={user.id}>user.username</option>
))}
const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
console.log(Object.values(users))const users = {
1: {
account_id: 1,
email: "john@example.com",
id: 1,
inserted_at: "2018-12-20T17:25:56",
registration_status: 1,
updated_at: "2018-12-20T17:25:56",
username: "john"
}
}
console.log(Object.values(users))answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
answered Jan 3 at 20:22
ic3b3rgic3b3rg
10.9k42045
10.9k42045
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029216%2flooping-over-an-collection-where-the-key-is-an-id-and-the-value-is-a-user-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
