Mixing
FlatList is not rendering my json array data
I've issue with rendering my array json data in FlatList component. I've searched lots of documentation and information through web and stackoverflow. Here is a couple of links of webpages that I've looked. But I couldn't figure it out.
How to use Flatlist
FlatList
FlatList not Rendering
Here is my code;
//Creating array for map the each item in places.
let array = ;
//Initializing the data to array for mapping it. data1 is my json data.
array.push(data1);
flatList = <FlatList
style={{ backgroundColor: 'red' }} // backgroundColor is visible but no List Component data in it.
data={array}
keyExtractor={(x, i) => i.toString()}
renderItem={({item}) => {
<List
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/> // nothing returns as <List />
}}
/>;
Here is my return statement;
return (
<View style={{ flex: 1 }} >
<TopBar
name={"title"}
bColor={"#1b92e7"}
miniLogo={require('../../../assets/pictures/image.png')}
/>
<List></List>
<List></List>
{flatList}
</View>
);
In return statement it is rendering those two component but in the flatList variable it is not rendering . What is causing the problem? I hope you guys can help me?
I appreciate your efforts lots of thanks.
json reactjs react-native
edited Jan 1 at 17:26
Cœur
17.6k9105145
asked Nov 20 '18 at 8:05
trontron
4318
|
show 1 more comment
I've issue with rendering my array json data in FlatList component. I've searched lots of documentation and information through web and stackoverflow. Here is a couple of links of webpages that I've looked. But I couldn't figure it out.
How to use Flatlist
FlatList
FlatList not Rendering
Here is my code;
//Creating array for map the each item in places.
let array = ;
//Initializing the data to array for mapping it. data1 is my json data.
array.push(data1);
flatList = <FlatList
style={{ backgroundColor: 'red' }} // backgroundColor is visible but no List Component data in it.
data={array}
keyExtractor={(x, i) => i.toString()}
renderItem={({item}) => {
<List
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/> // nothing returns as <List />
}}
/>;
Here is my return statement;
return (
<View style={{ flex: 1 }} >
<TopBar
name={"title"}
bColor={"#1b92e7"}
miniLogo={require('../../../assets/pictures/image.png')}
/>
<List></List>
<List></List>
{flatList}
</View>
);
In return statement it is rendering those two component but in the flatList variable it is not rendering . What is causing the problem? I hope you guys can help me?
I appreciate your efforts lots of thanks.
json reactjs react-native
edited Jan 1 at 17:26
Cœur
17.6k9105145
asked Nov 20 '18 at 8:05
trontron
4318
What do you mean it does not render in flatlist and rendering in return? Can you provide more details? May be the error or your expected results with results you are currently getting.
– Samitha Nanayakkara
Nov 20 '18 at 8:19
@SamithaNanayakkara I mean my <List /> component standalone visible in return statement but when trying to render in flatList it is not showing my <List /> but backgroundColor is also visible.
– tron
Nov 20 '18 at 8:32
1
You have to check yourdata1. You usearray.push(data1);and ifdata1is an array you will have[[ data ]], and you need to use inFlatListthis:data={array[0]}
– oma
Nov 20 '18 at 9:30
@oma thanks for your answer. I found my mistake. I will edit my question thanks again.
– tron
Nov 20 '18 at 9:44
It was related to what I said ? :)
– oma
Nov 20 '18 at 9:46
|
show 1 more comment
I've issue with rendering my array json data in FlatList component. I've searched lots of documentation and information through web and stackoverflow. Here is a couple of links of webpages that I've looked. But I couldn't figure it out.
How to use Flatlist
FlatList
FlatList not Rendering
Here is my code;
//Creating array for map the each item in places.
let array = ;
//Initializing the data to array for mapping it. data1 is my json data.
array.push(data1);
flatList = <FlatList
style={{ backgroundColor: 'red' }} // backgroundColor is visible but no List Component data in it.
data={array}
keyExtractor={(x, i) => i.toString()}
renderItem={({item}) => {
<List
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/> // nothing returns as <List />
}}
/>;
Here is my return statement;
return (
<View style={{ flex: 1 }} >
<TopBar
name={"title"}
bColor={"#1b92e7"}
miniLogo={require('../../../assets/pictures/image.png')}
/>
<List></List>
<List></List>
{flatList}
</View>
);
In return statement it is rendering those two component but in the flatList variable it is not rendering . What is causing the problem? I hope you guys can help me?
I appreciate your efforts lots of thanks.
json reactjs react-native
edited Jan 1 at 17:26
Cœur
17.6k9105145
asked Nov 20 '18 at 8:05
trontron
4318
I've issue with rendering my array json data in FlatList component. I've searched lots of documentation and information through web and stackoverflow. Here is a couple of links of webpages that I've looked. But I couldn't figure it out.
How to use Flatlist
FlatList
FlatList not Rendering
Here is my code;
//Creating array for map the each item in places.
let array = ;
//Initializing the data to array for mapping it. data1 is my json data.
array.push(data1);
flatList = <FlatList
style={{ backgroundColor: 'red' }} // backgroundColor is visible but no List Component data in it.
data={array}
keyExtractor={(x, i) => i.toString()}
renderItem={({item}) => {
<List
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/> // nothing returns as <List />
}}
/>;
Here is my return statement;
return (
<View style={{ flex: 1 }} >
<TopBar
name={"title"}
bColor={"#1b92e7"}
miniLogo={require('../../../assets/pictures/image.png')}
/>
<List></List>
<List></List>
{flatList}
</View>
);
In return statement it is rendering those two component but in the flatList variable it is not rendering . What is causing the problem? I hope you guys can help me?
I appreciate your efforts lots of thanks.
json reactjs react-native
json reactjs react-native
edited Jan 1 at 17:26
Cœur
17.6k9105145
asked Nov 20 '18 at 8:05
trontron
4318
edited Jan 1 at 17:26
Cœur
17.6k9105145
asked Nov 20 '18 at 8:05
trontron
4318
edited Jan 1 at 17:26
Cœur
17.6k9105145
edited Jan 1 at 17:26
Cœur
17.6k9105145
edited Jan 1 at 17:26
Cœur
17.6k9105145
17.6k9105145
asked Nov 20 '18 at 8:05
trontron
4318
asked Nov 20 '18 at 8:05
trontron
4318
asked Nov 20 '18 at 8:05
trontron
4318
4318
What do you mean it does not render in flatlist and rendering in return? Can you provide more details? May be the error or your expected results with results you are currently getting.
– Samitha Nanayakkara
Nov 20 '18 at 8:19
@SamithaNanayakkara I mean my <List /> component standalone visible in return statement but when trying to render in flatList it is not showing my <List /> but backgroundColor is also visible.
– tron
Nov 20 '18 at 8:32
1
You have to check yourdata1. You usearray.push(data1);and ifdata1is an array you will have[[ data ]], and you need to use inFlatListthis:data={array[0]}
– oma
Nov 20 '18 at 9:30
@oma thanks for your answer. I found my mistake. I will edit my question thanks again.
– tron
Nov 20 '18 at 9:44
It was related to what I said ? :)
– oma
Nov 20 '18 at 9:46
|
show 1 more comment
What do you mean it does not render in flatlist and rendering in return? Can you provide more details? May be the error or your expected results with results you are currently getting.
– Samitha Nanayakkara
Nov 20 '18 at 8:19
@SamithaNanayakkara I mean my <List /> component standalone visible in return statement but when trying to render in flatList it is not showing my <List /> but backgroundColor is also visible.
– tron
Nov 20 '18 at 8:32
1
You have to check yourdata1. You usearray.push(data1);and ifdata1is an array you will have[[ data ]], and you need to use inFlatListthis:data={array[0]}
– oma
Nov 20 '18 at 9:30
@oma thanks for your answer. I found my mistake. I will edit my question thanks again.
– tron
Nov 20 '18 at 9:44
It was related to what I said ? :)
– oma
Nov 20 '18 at 9:46
What do you mean it does not render in flatlist and rendering in return? Can you provide more details? May be the error or your expected results with results you are currently getting.
– Samitha Nanayakkara
Nov 20 '18 at 8:19
What do you mean it does not render in flatlist and rendering in return? Can you provide more details? May be the error or your expected results with results you are currently getting.
– Samitha Nanayakkara
Nov 20 '18 at 8:19
@SamithaNanayakkara I mean my <List /> component standalone visible in return statement but when trying to render in flatList it is not showing my <List /> but backgroundColor is also visible.
– tron
Nov 20 '18 at 8:32
@SamithaNanayakkara I mean my <List /> component standalone visible in return statement but when trying to render in flatList it is not showing my <List /> but backgroundColor is also visible.
– tron
Nov 20 '18 at 8:32
1
1
You have to check your
data1. You use array.push(data1); and if data1 is an array you will have [[ data ]], and you need to use in FlatList this: data={array[0]}– oma
Nov 20 '18 at 9:30
You have to check your
data1. You use array.push(data1); and if data1 is an array you will have [[ data ]], and you need to use in FlatList this: data={array[0]}– oma
Nov 20 '18 at 9:30
@oma thanks for your answer. I found my mistake. I will edit my question thanks again.
– tron
Nov 20 '18 at 9:44
@oma thanks for your answer. I found my mistake. I will edit my question thanks again.
– tron
Nov 20 '18 at 9:44
It was related to what I said ? :)
– oma
Nov 20 '18 at 9:46
It was related to what I said ? :)
– oma
Nov 20 '18 at 9:46
|
show 1 more comment
2 Answers
2
active
oldest
votes
You are not returning anything from renderItem
Try like that:
renderItem={({item}) => {
return (<List // for every item return your component
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>);
}}
Or just use the short syntax:
renderItem={({item}) => (<List // take a look at the brackets
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>
)}
answered Nov 20 '18 at 9:49
StundjiStundji
442212
thanks for your help.
– tron
Nov 20 '18 at 10:13
Did you resolve the issue ? If yes mark the question as resolved and happy coding :)
– Stundji
Nov 20 '18 at 11:01
add a comment |
As @oma's answer I changed the data as below;
data = {array} -> data = {array[0]}
and my another mistake was thinking ({item}) is referring json data that I want to render. It must be equal to array of json data we want to render.
//final data.
data = {array[0].a.b.c.jsonArray}
As @Stundji's answer it should return the List.
renderItem={({item}) => {
return (<List
district = {item.address}
phoneNumber = {item.phoneNumber}
neighbourhood = {item.sideInformation}
/>); //now it returns list in FlatList
}}
Thanks for all contribution.
answered Nov 20 '18 at 10:05
trontron
4318
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%2f53388624%2fflatlist-is-not-rendering-my-json-array-data%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 are not returning anything from renderItem
Try like that:
renderItem={({item}) => {
return (<List // for every item return your component
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>);
}}
Or just use the short syntax:
renderItem={({item}) => (<List // take a look at the brackets
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>
)}
answered Nov 20 '18 at 9:49
StundjiStundji
442212
thanks for your help.
– tron
Nov 20 '18 at 10:13
Did you resolve the issue ? If yes mark the question as resolved and happy coding :)
– Stundji
Nov 20 '18 at 11:01
add a comment |
You are not returning anything from renderItem
Try like that:
renderItem={({item}) => {
return (<List // for every item return your component
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>);
}}
Or just use the short syntax:
renderItem={({item}) => (<List // take a look at the brackets
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>
)}
answered Nov 20 '18 at 9:49
StundjiStundji
442212
thanks for your help.
– tron
Nov 20 '18 at 10:13
Did you resolve the issue ? If yes mark the question as resolved and happy coding :)
– Stundji
Nov 20 '18 at 11:01
add a comment |
You are not returning anything from renderItem
Try like that:
renderItem={({item}) => {
return (<List // for every item return your component
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>);
}}
Or just use the short syntax:
renderItem={({item}) => (<List // take a look at the brackets
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>
)}
answered Nov 20 '18 at 9:49
StundjiStundji
442212
You are not returning anything from renderItem
Try like that:
renderItem={({item}) => {
return (<List // for every item return your component
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>);
}}
Or just use the short syntax:
renderItem={({item}) => (<List // take a look at the brackets
district = {item.a.b.c.jsonArray[0].address}
phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
/>
)}
answered Nov 20 '18 at 9:49
StundjiStundji
442212
answered Nov 20 '18 at 9:49
StundjiStundji
442212
answered Nov 20 '18 at 9:49
StundjiStundji
442212
answered Nov 20 '18 at 9:49
StundjiStundji
442212
442212
thanks for your help.
– tron
Nov 20 '18 at 10:13
Did you resolve the issue ? If yes mark the question as resolved and happy coding :)
– Stundji
Nov 20 '18 at 11:01
add a comment |
thanks for your help.
– tron
Nov 20 '18 at 10:13
Did you resolve the issue ? If yes mark the question as resolved and happy coding :)
– Stundji
Nov 20 '18 at 11:01
thanks for your help.
– tron
Nov 20 '18 at 10:13
thanks for your help.
– tron
Nov 20 '18 at 10:13
Did you resolve the issue ? If yes mark the question as resolved and happy coding :)
– Stundji
Nov 20 '18 at 11:01
Did you resolve the issue ? If yes mark the question as resolved and happy coding :)
– Stundji
Nov 20 '18 at 11:01
add a comment |
As @oma's answer I changed the data as below;
data = {array} -> data = {array[0]}
and my another mistake was thinking ({item}) is referring json data that I want to render. It must be equal to array of json data we want to render.
//final data.
data = {array[0].a.b.c.jsonArray}
As @Stundji's answer it should return the List.
renderItem={({item}) => {
return (<List
district = {item.address}
phoneNumber = {item.phoneNumber}
neighbourhood = {item.sideInformation}
/>); //now it returns list in FlatList
}}
Thanks for all contribution.
answered Nov 20 '18 at 10:05
trontron
4318
add a comment |
As @oma's answer I changed the data as below;
data = {array} -> data = {array[0]}
and my another mistake was thinking ({item}) is referring json data that I want to render. It must be equal to array of json data we want to render.
//final data.
data = {array[0].a.b.c.jsonArray}
As @Stundji's answer it should return the List.
renderItem={({item}) => {
return (<List
district = {item.address}
phoneNumber = {item.phoneNumber}
neighbourhood = {item.sideInformation}
/>); //now it returns list in FlatList
}}
Thanks for all contribution.
answered Nov 20 '18 at 10:05
trontron
4318
add a comment |
As @oma's answer I changed the data as below;
data = {array} -> data = {array[0]}
and my another mistake was thinking ({item}) is referring json data that I want to render. It must be equal to array of json data we want to render.
//final data.
data = {array[0].a.b.c.jsonArray}
As @Stundji's answer it should return the List.
renderItem={({item}) => {
return (<List
district = {item.address}
phoneNumber = {item.phoneNumber}
neighbourhood = {item.sideInformation}
/>); //now it returns list in FlatList
}}
Thanks for all contribution.
answered Nov 20 '18 at 10:05
trontron
4318
As @oma's answer I changed the data as below;
data = {array} -> data = {array[0]}
and my another mistake was thinking ({item}) is referring json data that I want to render. It must be equal to array of json data we want to render.
//final data.
data = {array[0].a.b.c.jsonArray}
As @Stundji's answer it should return the List.
renderItem={({item}) => {
return (<List
district = {item.address}
phoneNumber = {item.phoneNumber}
neighbourhood = {item.sideInformation}
/>); //now it returns list in FlatList
}}
Thanks for all contribution.
answered Nov 20 '18 at 10:05
trontron
4318
answered Nov 20 '18 at 10:05
trontron
4318
answered Nov 20 '18 at 10:05
trontron
4318
answered Nov 20 '18 at 10:05
trontron
4318
4318
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%2f53388624%2fflatlist-is-not-rendering-my-json-array-data%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
What do you mean it does not render in flatlist and rendering in return? Can you provide more details? May be the error or your expected results with results you are currently getting.
– Samitha Nanayakkara
Nov 20 '18 at 8:19
@SamithaNanayakkara I mean my <List /> component standalone visible in return statement but when trying to render in flatList it is not showing my <List /> but backgroundColor is also visible.
– tron
Nov 20 '18 at 8:32
1
You have to check your
data1. You usearray.push(data1);and ifdata1is an array you will have[[ data ]], and you need to use inFlatListthis:data={array[0]}– oma
Nov 20 '18 at 9:30
@oma thanks for your answer. I found my mistake. I will edit my question thanks again.
– tron
Nov 20 '18 at 9:44
It was related to what I said ? :)
– oma
Nov 20 '18 at 9:46