How to iterate through the JSON object response in React Native

Question

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.

Read the documentation about FlatList => docs.expo.dev/versions/latest/react-native/flatlist — username404
– username404, Commented Mar 8, 2022 at 11:45
Thank you for pointing me in the right direction.....I've read the documentation and its working fine now. — Kehinde Aderinto
– Kehinde Aderinto, Commented Mar 8, 2022 at 13:59
Youre welcome. I added a fully awnser for the rest of the community. would be awesome if you press the checkmark. — username404
– username404, Commented Mar 8, 2022 at 16:58

username404 · Accepted Answer · 2022-03-08 16:57:38Z

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.

The Documentation of FlatList

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;

Collectives™ on Stack Overflow

How to iterate through the JSON object response in React Native

1 Answer 1

FlatList

Example

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

FlatList

Example

Comments

Your Answer

Sign up or log in

Post as a guest

Related