[英]React Native parsing response JSON into a flatlist
I am trying to parse the response JSON from the following json data:我正在尝试从以下 json 数据中解析响应 JSON :
{
"location_id": 73,
"location_name": "Aunt Mary's Great Coffee Shop",
"location_town": "London",
"latitude": 74.567,
"longitude": 102.435,
"photo_path": "http://cdn.coffida.com/images/78346822.jpg",
"avg_overall_rating": 4.5,
"avg_price_rating": 4.3,
"avg_quality_rating": 4,
"avg_clenliness_rating": 3.8,
"location_reviews": [
{
"review_id": 643,
"overall_rating": 4,
"price_rating": 2,
"quality_rating": 3,
"clenliness_rating": 5,
"review_body": "Great coffee, but the bathrooms stank!",
"likes": 4654
}
]
}
i am trying to parse the data fromt the location_ reviews array object.我正在尝试解析来自 location_reviews 数组 object 的数据。 i am successfully recieving the data as i have checked in a console.log
我已成功接收数据,因为我已在 console.log 中签入
i have also successfully recieved and printed the location name and id onto the screen我还成功接收并在屏幕上打印了位置名称和 ID
/* eslint-disable curly */
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable semi */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Text, ToastAndroid, FlatList, TouchableOpacity, StyleSheet} from 'react-native';
class Location extends Component {
constructor(props) {
super(props);
this.state = {
locations: [],
isLoading: true,
};
}
getData = async () => {
let loc_id = this.props.route.params.location_id;
return await fetch(`http://10.0.2.2:3333/api/1.0.0/location/${loc_id}`, {
method: 'get',
'headers': {
'Content-Type': 'application/json',
},
})
.then((response) => {
if (response.status === 200) {
return response.json();
} else if (response.status === 404) {
ToastAndroid.show('Unable to locate location', ToastAndroid.SHORT);
} else {
throw 'something went wrong';
}
})
.then((responseJson) => {
const review = responseJson.location_reviews[0]
console.log(review);
this.setState({
locations: responseJson,
isLoading: false,
});
})
.catch((error) => {
ToastAndroid.show(error.toString(), ToastAndroid.SHORT);
});
}
renderItem = ({item, index}) => {
let { locations } = item;
if (!locations[0]) return null;
let details = locations[0]
return (
<View>
<View>
<Text>{details.review_body}</Text>
<Text>{details.review_id}</Text>
</View>
</View>
);
}
keyExtractor = (item, index) => {
return index.toString();
}
render() {
return (
<View style={styles.space}>
<TouchableOpacity
style={styles.space}
onPress = {() => this.getData()}
>
<View>
<Text>get data</Text>
<Text>Location id: {this.props.route.params.location_id}</Text>
</View>
</TouchableOpacity>
<View>
<Text style={styles.space}>{this.state.locations.location_name}</Text>
<Text style={styles.space}>{this.state.locations.location_town}</Text>
</View>
<View style={{flex: 1}}>
<FlatList
data={this.state.dataSource}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
space: {
margin: 20,
padding: 20,
},
});
export default Location;
however i am completely stuck on how the access the array of location review data(review_id, review_body etc.)但是我完全停留在如何访问位置评论数据数组(review_id、review_body 等)
any ideas would be appreciated任何想法,将不胜感激
i managed to get the flatlist to compile using the following我设法让平面列表使用以下方法进行编译
render() {
if (this.state.isLoading) {
return (
<View>
<Text>loading...</Text>
</View>
)
} else return (
<View>
<Text>Name: {this.state.locations.location_name}</Text>
<FlatList
data={this.state.locations.location_reviews}
renderItem={({item}) => (
<View>
<Text>review id: {parseInt(item.review_id)}</Text>
<Text>body: {item.review_body}</Text>
<Text>overall rating: {parseInt(item.overall_rating)}</Text>
<Text>price rating: {parseInt(item.price_rating)}</Text>
<Text>quality rating: {parseInt(item.quality_rating)}</Text>
<Text>cleanliness rating: {parseInt(item.clenliness_rating)}</Text>
</View>
)}
keyExtractor={(item) => item.review_id.toString()}
/>
</View>
);
}
Note that the json_data you have above is an object, and FlatList
must receive an array (it then calls renderItem
with each item in that array, and displays this list of items).请注意,您上面的 json_data 是 object,
FlatList
必须接收一个数组(然后,它会使用该数组中的每个项目调用renderItem
,并显示此项目列表)。
There are a few changes you should make (I'm assuming that you want the FlatList
to display a list of items from the location_reviews
array):您应该进行一些更改(我假设您希望
FlatList
显示location_reviews
数组中的项目列表):
null
:null
:this.state = {
location: null,
}
this.state.location
exists and render nothing or a loading screen if it does not:this.state.location
存在,如果不存在则不渲染任何内容或加载屏幕:render() {
const { location } = this.state;
if (location === null) return null;
...
}
this.state.location.location_reviews
to your FlatList
:this.state.location.location_reviews
传递给您的FlatList
:const { location } = this.state;
<FlatList
data={location.location_reviews}
...
/>
renderItem
method:renderItem
方法:renderItem = ({item, index}) => {
return (
<View>
<Text>{item.review_body}</Text>
<Text>{item.review_id}</Text>
</View>
);
}
Note: I have not tested this as the snack does not work.注意:我没有对此进行测试,因为零食不起作用。 You might need to adjust a few more things (ie. I changed this.state.locations -> this.state.location, etc.)
您可能还需要调整一些东西(即我更改了 this.state.locations -> this.state.location 等)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.