React display an Array of Objects with varying values, is there a better alternative to .map?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am working with some data that I didn't create and some of the objects in the array have values while others don't.
I am used to using .map to display details in an array of objects, is there a way to display this varying array of objects?
For example:
arr = [
{
"Name": "Bob",
"Age": 56,
"Gender": "Male",
"Description": "This describes bob"
},
{
"Name": "Mary",
"Age": 32
},
{
"Name": "Tony",
"Age": 27,
"Gender": "Male"
}
]
As some might have a gender or description value but not all for example.
How I am used to displaying out data for example:
arr.map(item => (
<div>
<p>Name: {item.Name}</p>
<p>Gender: {item.Gender}</p>
<p>Age: {item.Age}</p>
<p>"Description: {item.Description}</p>
</div>
)
I know if I do it this way I will get an error once it goes to map one with an .Age or .Description value.
Any thoughts or hints?
arrays reactjs object ecmascript-6 array.prototype.map
asked Nov 23 '18 at 19:26
AustinAustin
396
add a comment |
I am working with some data that I didn't create and some of the objects in the array have values while others don't.
I am used to using .map to display details in an array of objects, is there a way to display this varying array of objects?
For example:
arr = [
{
"Name": "Bob",
"Age": 56,
"Gender": "Male",
"Description": "This describes bob"
},
{
"Name": "Mary",
"Age": 32
},
{
"Name": "Tony",
"Age": 27,
"Gender": "Male"
}
]
As some might have a gender or description value but not all for example.
How I am used to displaying out data for example:
arr.map(item => (
<div>
<p>Name: {item.Name}</p>
<p>Gender: {item.Gender}</p>
<p>Age: {item.Age}</p>
<p>"Description: {item.Description}</p>
</div>
)
I know if I do it this way I will get an error once it goes to map one with an .Age or .Description value.
Any thoughts or hints?
arrays reactjs object ecmascript-6 array.prototype.map
asked Nov 23 '18 at 19:26
AustinAustin
396
1
It won't given an error if there's no age or description, there'll just be nothing there in the element:Age:. If you want you can give them a default value like so<p>Age: {item.Age || 'N/A'}</p>
– Jayce444
Nov 23 '18 at 19:29
Thank you are right, for some reason I thought it would throw an error.
– Austin
Nov 23 '18 at 19:49
add a comment |
I am working with some data that I didn't create and some of the objects in the array have values while others don't.
I am used to using .map to display details in an array of objects, is there a way to display this varying array of objects?
For example:
arr = [
{
"Name": "Bob",
"Age": 56,
"Gender": "Male",
"Description": "This describes bob"
},
{
"Name": "Mary",
"Age": 32
},
{
"Name": "Tony",
"Age": 27,
"Gender": "Male"
}
]
As some might have a gender or description value but not all for example.
How I am used to displaying out data for example:
arr.map(item => (
<div>
<p>Name: {item.Name}</p>
<p>Gender: {item.Gender}</p>
<p>Age: {item.Age}</p>
<p>"Description: {item.Description}</p>
</div>
)
I know if I do it this way I will get an error once it goes to map one with an .Age or .Description value.
Any thoughts or hints?
arrays reactjs object ecmascript-6 array.prototype.map
asked Nov 23 '18 at 19:26
AustinAustin
396
I am working with some data that I didn't create and some of the objects in the array have values while others don't.
I am used to using .map to display details in an array of objects, is there a way to display this varying array of objects?
For example:
arr = [
{
"Name": "Bob",
"Age": 56,
"Gender": "Male",
"Description": "This describes bob"
},
{
"Name": "Mary",
"Age": 32
},
{
"Name": "Tony",
"Age": 27,
"Gender": "Male"
}
]
As some might have a gender or description value but not all for example.
How I am used to displaying out data for example:
arr.map(item => (
<div>
<p>Name: {item.Name}</p>
<p>Gender: {item.Gender}</p>
<p>Age: {item.Age}</p>
<p>"Description: {item.Description}</p>
</div>
)
I know if I do it this way I will get an error once it goes to map one with an .Age or .Description value.
Any thoughts or hints?
arrays reactjs object ecmascript-6 array.prototype.map
arrays reactjs object ecmascript-6 array.prototype.map
asked Nov 23 '18 at 19:26
AustinAustin
396
asked Nov 23 '18 at 19:26
AustinAustin
396
asked Nov 23 '18 at 19:26
AustinAustin
396
asked Nov 23 '18 at 19:26
AustinAustin
396
asked Nov 23 '18 at 19:26
AustinAustin
396
396
1
It won't given an error if there's no age or description, there'll just be nothing there in the element:Age:. If you want you can give them a default value like so<p>Age: {item.Age || 'N/A'}</p>
– Jayce444
Nov 23 '18 at 19:29
Thank you are right, for some reason I thought it would throw an error.
– Austin
Nov 23 '18 at 19:49
add a comment |
1
It won't given an error if there's no age or description, there'll just be nothing there in the element:Age:. If you want you can give them a default value like so<p>Age: {item.Age || 'N/A'}</p>
– Jayce444
Nov 23 '18 at 19:29
Thank you are right, for some reason I thought it would throw an error.
– Austin
Nov 23 '18 at 19:49
1
1
It won't given an error if there's no age or description, there'll just be nothing there in the element:
Age: . If you want you can give them a default value like so <p>Age: {item.Age || 'N/A'}</p>– Jayce444
Nov 23 '18 at 19:29
It won't given an error if there's no age or description, there'll just be nothing there in the element:
Age: . If you want you can give them a default value like so <p>Age: {item.Age || 'N/A'}</p>– Jayce444
Nov 23 '18 at 19:29
Thank you are right, for some reason I thought it would throw an error.
– Austin
Nov 23 '18 at 19:49
Thank you are right, for some reason I thought it would throw an error.
– Austin
Nov 23 '18 at 19:49
add a comment |
1 Answer
1
active
oldest
votes
Option 1: Render an entry only if it has a value:
arr.map(({ Name, Gender, Age, Description }) => (
<div>
<p>Name: {Name}</p>
{Gender && <p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
{Description && <p>"Description: {Description}</p>}
</div>
)
Option 2: Supply a default value:
arr.map(({ Name, Gender = 'N/A', Age, Description = 'N/A' }) => (
<div>
<p>Name: {Name}</p>
<p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
<p>"Description: {Description}</p>}
</div>
)
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
1
Wow that's cool I never knew you could do that before.
– Austin
Nov 23 '18 at 19:49
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%2f53452037%2freact-display-an-array-of-objects-with-varying-values-is-there-a-better-alterna%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Option 1: Render an entry only if it has a value:
arr.map(({ Name, Gender, Age, Description }) => (
<div>
<p>Name: {Name}</p>
{Gender && <p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
{Description && <p>"Description: {Description}</p>}
</div>
)
Option 2: Supply a default value:
arr.map(({ Name, Gender = 'N/A', Age, Description = 'N/A' }) => (
<div>
<p>Name: {Name}</p>
<p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
<p>"Description: {Description}</p>}
</div>
)
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
1
Wow that's cool I never knew you could do that before.
– Austin
Nov 23 '18 at 19:49
add a comment |
Option 1: Render an entry only if it has a value:
arr.map(({ Name, Gender, Age, Description }) => (
<div>
<p>Name: {Name}</p>
{Gender && <p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
{Description && <p>"Description: {Description}</p>}
</div>
)
Option 2: Supply a default value:
arr.map(({ Name, Gender = 'N/A', Age, Description = 'N/A' }) => (
<div>
<p>Name: {Name}</p>
<p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
<p>"Description: {Description}</p>}
</div>
)
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
1
Wow that's cool I never knew you could do that before.
– Austin
Nov 23 '18 at 19:49
add a comment |
Option 1: Render an entry only if it has a value:
arr.map(({ Name, Gender, Age, Description }) => (
<div>
<p>Name: {Name}</p>
{Gender && <p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
{Description && <p>"Description: {Description}</p>}
</div>
)
Option 2: Supply a default value:
arr.map(({ Name, Gender = 'N/A', Age, Description = 'N/A' }) => (
<div>
<p>Name: {Name}</p>
<p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
<p>"Description: {Description}</p>}
</div>
)
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
Option 1: Render an entry only if it has a value:
arr.map(({ Name, Gender, Age, Description }) => (
<div>
<p>Name: {Name}</p>
{Gender && <p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
{Description && <p>"Description: {Description}</p>}
</div>
)
Option 2: Supply a default value:
arr.map(({ Name, Gender = 'N/A', Age, Description = 'N/A' }) => (
<div>
<p>Name: {Name}</p>
<p>Gender: {Gender}</p>}
<p>Age: {Age}</p>
<p>"Description: {Description}</p>}
</div>
)
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
answered Nov 23 '18 at 19:33
Ori DroriOri Drori
82.3k148998
82.3k148998
1
Wow that's cool I never knew you could do that before.
– Austin
Nov 23 '18 at 19:49
add a comment |
1
Wow that's cool I never knew you could do that before.
– Austin
Nov 23 '18 at 19:49
1
1
Wow that's cool I never knew you could do that before.
– Austin
Nov 23 '18 at 19:49
Wow that's cool I never knew you could do that before.
– Austin
Nov 23 '18 at 19:49
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%2f53452037%2freact-display-an-array-of-objects-with-varying-values-is-there-a-better-alterna%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
1
It won't given an error if there's no age or description, there'll just be nothing there in the element:
Age:. If you want you can give them a default value like so<p>Age: {item.Age || 'N/A'}</p>– Jayce444
Nov 23 '18 at 19:29
Thank you are right, for some reason I thought it would throw an error.
– Austin
Nov 23 '18 at 19:49