1

I'm trying to display elements of a JSON Array through FlatList on React Native. In renderItem(), when I try to access keys for each item, nothing would output. So I tried just rendering each item, and my FlatList displays one character per row. I've looked through the documentation for FlatList, so I'm not sure if I need to adjust the array before I pass it to FlatList as data.

Here's the format of my JSON Array (should currently only have one element):

data: (JSON array)    
[    
  { "myAvail":19,    
    "my_ID":"10204166655843580",    
    "friend_ID":"33333",
    "friendName":"JohnSmith",
    "myStart":"2018-03-21 10:30:27",
    "friendStart":"2018-03-21 10:45:00"
  }
]

And here is my usage in render():

render() {
    if (this.state.isLoading) {
        return (
            <View style={{flex:1, paddingTop: 20}}>
                <ActivityIndicator />
            </View>
        );
    }

    console.log("source data for FlatList - ", this.state.dataSource);

    return (
        <View>
            <FlatList
                data = {this.state.dataSource}
                renderItem={({item}) => <Text> {item} </Text>}
                keyExtractor= { (item, index) => index}
            />
        </View>
    );
}

The console's output looks like this:

source data for FlatList -  [{"myAvail":19,"my_ID":"10204166655843580","friend_ID":"33333","friendName":"DarrenAtkinson","myStart":"2018-03-21 10:30:27","friendStart":"2018-03-21 10:45:00"}]

However the final result on-screen is one character printed per row. My guess is that each character is treated as an item, but I'm unsure how to fix this.

Thanks for your time.

Phi Lam
  • 11
  • 2
  • Could you please add a screenshot of what's actually displayed on your screen? However, if in renderItem you output the json itself, maybe try it with JSON.stringify() to get the string. Maybe the text component treats the JSON as an object. – kolbma Mar 21 '18 at 12:37
  • Thanks for your reply, since then I’ve found that my partner’s server response was not properly formatted because .json() would not parse it properly. My implementation worked with a dummy API’s response. – Phi Lam Mar 22 '18 at 19:08

1 Answers1

1

you can set dataSource like this :

data = {[this.state.dataSource]}

this will treat string as only one item

chengf
  • 21
  • 3