Display array list of object in React JS
0
Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?
Post:
Store1: [
0:Id:"0001", Business:"Ministop"
]
Store2: [
0:Id:"0002", Business:"Grocery Store"
]
Store3: [
0:Id:"0003", Business:"Seven Eleven"
]
Store4: [
0:Id:"0004", Business:"Big Store",
1:Id:"0005", Business:"Medium Store"
]
This is the sample output:
**Store 1**
**Id Business**
0001 Ministop
**Store 2**
**Id Business**
0002 Grocery Store
**Store 3**
**Id Business**
0003 Seven Eleven
**Store 4**
**Id Business**
0004 Big Store
0005 Medium Store
I have this code and I've got an error this.state.post.map is not a function
render()
const groupList = this.state.post.map((data, index) =>
return (
<div key=index>
<div>data</div>
</div>
)
);
return (
<div>groupList</div>
)
Thank you
javascript arrays reactjs
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
add a comment |
0
Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?
Post:
Store1: [
0:Id:"0001", Business:"Ministop"
]
Store2: [
0:Id:"0002", Business:"Grocery Store"
]
Store3: [
0:Id:"0003", Business:"Seven Eleven"
]
Store4: [
0:Id:"0004", Business:"Big Store",
1:Id:"0005", Business:"Medium Store"
]
This is the sample output:
**Store 1**
**Id Business**
0001 Ministop
**Store 2**
**Id Business**
0002 Grocery Store
**Store 3**
**Id Business**
0003 Seven Eleven
**Store 4**
**Id Business**
0004 Big Store
0005 Medium Store
I have this code and I've got an error this.state.post.map is not a function
render()
const groupList = this.state.post.map((data, index) =>
return (
<div key=index>
<div>data</div>
</div>
)
);
return (
<div>groupList</div>
)
Thank you
javascript arrays reactjs
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
You will have to loop over data and create an array of React.NodeElement. Then just put it in render
– Rajesh
Nov 15 '18 at 5:42
We will be able to help you quicker if you could share an attempt that did not work
– Ahmad
Nov 15 '18 at 5:44
updated @Ahmad and rajest
– Jay Ar Viluan
Nov 15 '18 at 5:50
can you post you render function?
– Robsonsjre
Nov 15 '18 at 5:59
@Robsonsjre updated thanks
– Jay Ar Viluan
Nov 15 '18 at 6:01
add a comment |
0
0
0
Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?
Post:
Store1: [
0:Id:"0001", Business:"Ministop"
]
Store2: [
0:Id:"0002", Business:"Grocery Store"
]
Store3: [
0:Id:"0003", Business:"Seven Eleven"
]
Store4: [
0:Id:"0004", Business:"Big Store",
1:Id:"0005", Business:"Medium Store"
]
This is the sample output:
**Store 1**
**Id Business**
0001 Ministop
**Store 2**
**Id Business**
0002 Grocery Store
**Store 3**
**Id Business**
0003 Seven Eleven
**Store 4**
**Id Business**
0004 Big Store
0005 Medium Store
I have this code and I've got an error this.state.post.map is not a function
render()
const groupList = this.state.post.map((data, index) =>
return (
<div key=index>
<div>data</div>
</div>
)
);
return (
<div>groupList</div>
)
Thank you
javascript arrays reactjs
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?
Post:
Store1: [
0:Id:"0001", Business:"Ministop"
]
Store2: [
0:Id:"0002", Business:"Grocery Store"
]
Store3: [
0:Id:"0003", Business:"Seven Eleven"
]
Store4: [
0:Id:"0004", Business:"Big Store",
1:Id:"0005", Business:"Medium Store"
]
This is the sample output:
**Store 1**
**Id Business**
0001 Ministop
**Store 2**
**Id Business**
0002 Grocery Store
**Store 3**
**Id Business**
0003 Seven Eleven
**Store 4**
**Id Business**
0004 Big Store
0005 Medium Store
I have this code and I've got an error this.state.post.map is not a function
render()
const groupList = this.state.post.map((data, index) =>
return (
<div key=index>
<div>data</div>
</div>
)
);
return (
<div>groupList</div>
)
Thank you
javascript arrays reactjs
javascript arrays reactjs
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
edited Nov 15 '18 at 6:01
Jay Ar Viluan
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
asked Nov 15 '18 at 5:38
Jay Ar ViluanJay Ar Viluan
275
275
You will have to loop over data and create an array of React.NodeElement. Then just put it in render
– Rajesh
Nov 15 '18 at 5:42
We will be able to help you quicker if you could share an attempt that did not work
– Ahmad
Nov 15 '18 at 5:44
updated @Ahmad and rajest
– Jay Ar Viluan
Nov 15 '18 at 5:50
can you post you render function?
– Robsonsjre
Nov 15 '18 at 5:59
@Robsonsjre updated thanks
– Jay Ar Viluan
Nov 15 '18 at 6:01
add a comment |
You will have to loop over data and create an array of React.NodeElement. Then just put it in render
– Rajesh
Nov 15 '18 at 5:42
We will be able to help you quicker if you could share an attempt that did not work
– Ahmad
Nov 15 '18 at 5:44
updated @Ahmad and rajest
– Jay Ar Viluan
Nov 15 '18 at 5:50
can you post you render function?
– Robsonsjre
Nov 15 '18 at 5:59
@Robsonsjre updated thanks
– Jay Ar Viluan
Nov 15 '18 at 6:01
You will have to loop over data and create an array of React.NodeElement. Then just put it in render
– Rajesh
Nov 15 '18 at 5:42
You will have to loop over data and create an array of React.NodeElement. Then just put it in render
– Rajesh
Nov 15 '18 at 5:42
We will be able to help you quicker if you could share an attempt that did not work
– Ahmad
Nov 15 '18 at 5:44
We will be able to help you quicker if you could share an attempt that did not work
– Ahmad
Nov 15 '18 at 5:44
updated @Ahmad and rajest
– Jay Ar Viluan
Nov 15 '18 at 5:50
updated @Ahmad and rajest
– Jay Ar Viluan
Nov 15 '18 at 5:50
can you post you render function?
– Robsonsjre
Nov 15 '18 at 5:59
can you post you render function?
– Robsonsjre
Nov 15 '18 at 5:59
@Robsonsjre updated thanks
– Jay Ar Viluan
Nov 15 '18 at 6:01
@Robsonsjre updated thanks
– Jay Ar Viluan
Nov 15 '18 at 6:01
add a comment |
2 Answers
2
active
oldest
votes
1
map is not a method of an object. You can map over its keys using Object.keys.
render()
const groupList = Object.keys(this.state.post).map((key) =>
return (
<div key=key>
<div>this.state.post[key]</div>
</div>
)
);
return (
<div>groupList</div>
)
However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
add a comment |
0
This is how you map it. just change post with this.state.post
const post =
Store1: [
Id: '0001', Business: 'Ministop'
],
Store2: [
Id: '0002', Business: 'Grocery Store'
],
Store3: [
Id: '0003', Business: 'Seven Eleven'
],
Store4: [
Id: '0004', Business: 'Big Store' ,
Id: '0005', Business: 'Medium Store'
]
;
console.log(Object.keys(post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ).map(data =>
return (
<div key=data.id>
<div>data.Business</div>
</div>
)
)
*/answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
1
OP needs access to top level keys likeStore1but you are throwing them out
– Juan Mendes
Nov 15 '18 at 6:18
Well I thought he wanted to render list of Businesses
– Delgee B
Nov 15 '18 at 6:30
Yes Store1 (businesses was removed from the array
– Jay Ar Viluan
Nov 15 '18 at 6:52
@DelgeeB You must have missed the desired output the OP posted
– Juan Mendes
Nov 15 '18 at 13:43
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
);
);
draft saved
draft discarded
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%2f53313078%2fdisplay-array-list-of-object-in-react-js%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
1
map is not a method of an object. You can map over its keys using Object.keys.
render()
const groupList = Object.keys(this.state.post).map((key) =>
return (
<div key=key>
<div>this.state.post[key]</div>
</div>
)
);
return (
<div>groupList</div>
)
However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
add a comment |
1
map is not a method of an object. You can map over its keys using Object.keys.
render()
const groupList = Object.keys(this.state.post).map((key) =>
return (
<div key=key>
<div>this.state.post[key]</div>
</div>
)
);
return (
<div>groupList</div>
)
However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
add a comment |
1
1
1
map is not a method of an object. You can map over its keys using Object.keys.
render()
const groupList = Object.keys(this.state.post).map((key) =>
return (
<div key=key>
<div>this.state.post[key]</div>
</div>
)
);
return (
<div>groupList</div>
)
However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
map is not a method of an object. You can map over its keys using Object.keys.
render()
const groupList = Object.keys(this.state.post).map((key) =>
return (
<div key=key>
<div>this.state.post[key]</div>
</div>
)
);
return (
<div>groupList</div>
)
However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
edited Nov 15 '18 at 6:16
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
answered Nov 15 '18 at 6:10
Juan MendesJuan Mendes
68.2k20116159
68.2k20116159
add a comment |
add a comment |
0
This is how you map it. just change post with this.state.post
const post =
Store1: [
Id: '0001', Business: 'Ministop'
],
Store2: [
Id: '0002', Business: 'Grocery Store'
],
Store3: [
Id: '0003', Business: 'Seven Eleven'
],
Store4: [
Id: '0004', Business: 'Big Store' ,
Id: '0005', Business: 'Medium Store'
]
;
console.log(Object.keys(post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ).map(data =>
return (
<div key=data.id>
<div>data.Business</div>
</div>
)
)
*/answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
1
OP needs access to top level keys likeStore1but you are throwing them out
– Juan Mendes
Nov 15 '18 at 6:18
Well I thought he wanted to render list of Businesses
– Delgee B
Nov 15 '18 at 6:30
Yes Store1 (businesses was removed from the array
– Jay Ar Viluan
Nov 15 '18 at 6:52
@DelgeeB You must have missed the desired output the OP posted
– Juan Mendes
Nov 15 '18 at 13:43
add a comment |
0
This is how you map it. just change post with this.state.post
const post =
Store1: [
Id: '0001', Business: 'Ministop'
],
Store2: [
Id: '0002', Business: 'Grocery Store'
],
Store3: [
Id: '0003', Business: 'Seven Eleven'
],
Store4: [
Id: '0004', Business: 'Big Store' ,
Id: '0005', Business: 'Medium Store'
]
;
console.log(Object.keys(post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ).map(data =>
return (
<div key=data.id>
<div>data.Business</div>
</div>
)
)
*/answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
1
OP needs access to top level keys likeStore1but you are throwing them out
– Juan Mendes
Nov 15 '18 at 6:18
Well I thought he wanted to render list of Businesses
– Delgee B
Nov 15 '18 at 6:30
Yes Store1 (businesses was removed from the array
– Jay Ar Viluan
Nov 15 '18 at 6:52
@DelgeeB You must have missed the desired output the OP posted
– Juan Mendes
Nov 15 '18 at 13:43
add a comment |
0
0
0
This is how you map it. just change post with this.state.post
const post =
Store1: [
Id: '0001', Business: 'Ministop'
],
Store2: [
Id: '0002', Business: 'Grocery Store'
],
Store3: [
Id: '0003', Business: 'Seven Eleven'
],
Store4: [
Id: '0004', Business: 'Big Store' ,
Id: '0005', Business: 'Medium Store'
]
;
console.log(Object.keys(post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ).map(data =>
return (
<div key=data.id>
<div>data.Business</div>
</div>
)
)
*/answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
This is how you map it. just change post with this.state.post
const post =
Store1: [
Id: '0001', Business: 'Ministop'
],
Store2: [
Id: '0002', Business: 'Grocery Store'
],
Store3: [
Id: '0003', Business: 'Seven Eleven'
],
Store4: [
Id: '0004', Business: 'Big Store' ,
Id: '0005', Business: 'Medium Store'
]
;
console.log(Object.keys(post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ).map(data =>
return (
<div key=data.id>
<div>data.Business</div>
</div>
)
)
*/const post =
Store1: [
Id: '0001', Business: 'Ministop'
],
Store2: [
Id: '0002', Business: 'Grocery Store'
],
Store3: [
Id: '0003', Business: 'Seven Eleven'
],
Store4: [
Id: '0004', Business: 'Big Store' ,
Id: '0005', Business: 'Medium Store'
]
;
console.log(Object.keys(post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ).map(data =>
return (
<div key=data.id>
<div>data.Business</div>
</div>
)
)
*/const post =
Store1: [
Id: '0001', Business: 'Ministop'
],
Store2: [
Id: '0002', Business: 'Grocery Store'
],
Store3: [
Id: '0003', Business: 'Seven Eleven'
],
Store4: [
Id: '0004', Business: 'Big Store' ,
Id: '0005', Business: 'Medium Store'
]
;
console.log(Object.keys(post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) =>
return [...acccumilator, ...post[iterator]];
, ).map(data =>
return (
<div key=data.id>
<div>data.Business</div>
</div>
)
)
*/answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
answered Nov 15 '18 at 6:11
Delgee BDelgee B
665
665
1
OP needs access to top level keys likeStore1but you are throwing them out
– Juan Mendes
Nov 15 '18 at 6:18
Well I thought he wanted to render list of Businesses
– Delgee B
Nov 15 '18 at 6:30
Yes Store1 (businesses was removed from the array
– Jay Ar Viluan
Nov 15 '18 at 6:52
@DelgeeB You must have missed the desired output the OP posted
– Juan Mendes
Nov 15 '18 at 13:43
add a comment |
1
OP needs access to top level keys likeStore1but you are throwing them out
– Juan Mendes
Nov 15 '18 at 6:18
Well I thought he wanted to render list of Businesses
– Delgee B
Nov 15 '18 at 6:30
Yes Store1 (businesses was removed from the array
– Jay Ar Viluan
Nov 15 '18 at 6:52
@DelgeeB You must have missed the desired output the OP posted
– Juan Mendes
Nov 15 '18 at 13:43
1
1
OP needs access to top level keys like
Store1 but you are throwing them out– Juan Mendes
Nov 15 '18 at 6:18
OP needs access to top level keys like
Store1 but you are throwing them out– Juan Mendes
Nov 15 '18 at 6:18
Well I thought he wanted to render list of Businesses
– Delgee B
Nov 15 '18 at 6:30
Well I thought he wanted to render list of Businesses
– Delgee B
Nov 15 '18 at 6:30
Yes Store1 (businesses was removed from the array
– Jay Ar Viluan
Nov 15 '18 at 6:52
Yes Store1 (businesses was removed from the array
– Jay Ar Viluan
Nov 15 '18 at 6:52
@DelgeeB You must have missed the desired output the OP posted
– Juan Mendes
Nov 15 '18 at 13:43
@DelgeeB You must have missed the desired output the OP posted
– Juan Mendes
Nov 15 '18 at 13:43
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53313078%2fdisplay-array-list-of-object-in-react-js%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
You will have to loop over data and create an array of React.NodeElement. Then just put it in render
– Rajesh
Nov 15 '18 at 5:42
We will be able to help you quicker if you could share an attempt that did not work
– Ahmad
Nov 15 '18 at 5:44
updated @Ahmad and rajest
– Jay Ar Viluan
Nov 15 '18 at 5:50
can you post you render function?
– Robsonsjre
Nov 15 '18 at 5:59
@Robsonsjre updated thanks
– Jay Ar Viluan
Nov 15 '18 at 6:01