I need help on now to iterate the JSON object response for a React-Native project i'm working on using expo dev.
This is the link for JSON response: https://opylistic.com/lens/api/get_education_data/91
//JSON response below:
{
"data": [
{
"id": 1,
"user_id": 91,
"institution": "Anambra State University, Owerri",
"qualification": "Certified Designer",
"study_field": "Mathematic",
"start_date": "22th January 1992",
"end_date": "14th June 2021",
"grade": "Upper credit",
"created_at": "2021-11-22T22:46:05.000000Z",
"updated_at": "2021-11-22T22:46:05.000000Z"
},
{
"id": 3,
"user_id": 91,
"institution": "Anambra State University, Owerri",
"qualification": "Certified Designer",
"study_field": "Mathematic",
"start_date": "12/08/2021",
"end_date": "23/05/2021",
"grade": "Second-class Upper Division",
"created_at": "2021-11-23T22:37:21.000000Z",
"updated_at": "2021-11-23T22:37:21.000000Z"
},
{
"id": 4,
"user_id": 91,
"institution": "Delta State University, Imo State, Nigeria",
"qualification": "PhD",
"study_field": "Computer science",
"start_date": "22th January 1992",
"end_date": "14th June 2021",
"grade": "Distinction",
"created_at": "2021-11-23T22:37:39.000000Z",
"updated_at": "2021-11-23T22:38:13.000000Z"
}
],
"status": "success",
"total": 3
//This is the part of the code that fetches the JSON response object:
const[eduData, setEduData] = useState(false);
const[eduData, setEduData] = useState(false);
const[eduTotal, setEduTotal] = useState('');
const[eduInfo, setEduInfo] = useState('');
useEffect(() => {
SecureStore.getItemAsync('user')
.then(userString => {
if (userString) {
const userObject = JSON.parse(userString)
setUsername(userObject);
fetch('https://opylistic.com/lens/api/get_education_data/' userObject.id '')
.then((response) => response.json())
.then(responseJson => {
if(responseJson.status == 'success')
{
alert(JSON.stringify(responseJson.data));
setEduData(true);
setEduInfo(responseJson.data);
setEduTotal(responseJson.total);
}
//This is the return statement for my view section
if(eduData)
{
return(
<View>
<Text>{eduInfo.institution}</Text>
{Object.keys(eduInfo).map((key, idx) => (
<Text key={idx}>{eduInfo[key]}</Text>
))}
</View>
);
The alert is showing the received json data in string format but when I tried to display in my view, i got the error message shown below.
Error message:
Objects are not valid as React child(found: object with keys (id, user_id, institution, qualification, study_field, start_date, end_date, grade). If you mean to render a collection of children, use an array instead.
CodePudding user response:
If you are using Expo to develop React Native Applikations, you can use the FlatList component to iterate and render objects from an JSON Object.
FlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode.
- Configurable viewability callbacks.
- Header support.
- Footer support.
- Separator support.
- Pull to Refresh.
- Scroll loading.
- ScrollToIndex support.
- Multiple column support.
If you need section support, use <SectionList>
. Documentation of SectionList
Example
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => <Item title={item.title} />;
return (
<SafeAreaView style={styles.container}>
<FlatList data={DATA} renderItem={renderItem} keyExtractor={item => item.id} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;