Home > Mobile >  How to iterate through the JSON object response in React Native
How to iterate through the JSON object response in React Native

Time:03-09

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.

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;
  • Related