How I can display 2 Dimensional JSON Data to my React Native FlatList
Question
I have want to display Google Spreadsheet data into my React native FlatList view. I added Data to my SpreadSheet and via Script I fetch those data into JSON format but it gives me a 2 Dimensional JSON Data , And this is the difficult part for me. I was not able to fetch the 2 Dimensional JSON data to my react-native flat list. I also tried with offline
This is My JSON Data: {"user":[{"name":"Arbaz","name2":"Salim"},{"name":"Imtiyaz","name2":"Kudekar"},{"name":"Shaikh ","name2":"Arbaz"}]}
So how I can display this data to my Flat-list?
import * as React from 'react'; import { Text, View, StyleSheet, ListView,Image,FlatList,List,ListItem } from 'react-native'; import { Header,Left,Body,Right,Title } from 'native-base'; import data from './sales.json'; const basketIcon = require('./123.png'); export default class App extends React.Component { render() { return ( <View style={{flex: 1, flexDirection: 'column'}}> <Header> <Left/> <Body> <Title>Header</Title> </Body> <Right /> </Header> <FlatList data={data} showsVerticalScrollIndicator={false} renderItem={({item}) => <View style={styles.row}> <View style={styles.iconContainer}> <Image source={basketIcon} style={styles.icon} /> </View> <View style={styles.info}> <Text style={styles.items}>{item.items} Items</Text> <Text style={styles.address}>{item.address}</Text> </View> <View style={styles.total}> <Text style={styles.date}>{item.date}</Text> <Text style={styles.price}>${item.total}</Text> </View> </View> } keyExtractor={(item, index) => index.toString()} /> </View> ) } } const styles = StyleSheet.create({ mainContainer: { flex: 1, backgroundColor: '#fff', }, title: { backgroundColor: '#0f1b29', color: '#fff', fontSize: 18, fontWeight: 'bold', padding: 10, paddingTop: 40, textAlign: 'center', }, row: { borderColor: '#f1f1f1', borderBottomWidth: 1, flexDirection: 'row', marginLeft: 10, marginRight: 10, paddingTop: 20, paddingBottom: 20, }, iconContainer: { alignItems: 'center', backgroundColor: '#feb401', borderColor: '#feaf12', borderRadius: 25, borderWidth: 1, justifyContent: 'center', height: 50, width: 50, }, icon: { tintColor: '#fff', height: 22, width: 22, }, info: { flex: 1, paddingLeft: 25, paddingRight: 25, }, items: { fontWeight: 'bold', fontSize: 16, marginBottom: 5, }, address: { color: '#ccc', fontSize: 14, }, total: { width: 80, }, date: { fontSize: 12, marginBottom: 5, }, price: { color: '#1cad61', fontSize: 25, fontWeight: 'bold', }, });
I tried with Parse JSON Method also but it didn't work for me It show only first row with filled data
1 answers
solution1
0 2018-11-03 11:33:22
If you have extracted data and put that in a variable, suppose x, then: const x = data;
<FlatList
data={x.user}
....
/>
And inside renderItem use item.name or item.name2 to get the value. I don't think there is anything wrong with the JSON you are receiving!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.