CODEWITHSUNDEEP
javascriptjsonreact-native
Kehinde Aderinto
Kehinde Aderinto

Reputation: 21

How to iterate through the JSON object response in React Native

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.

Upvotes: 1

Views: 871

Answers (1)

username404
username404

Reputation: 329

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;

Upvotes: 1

Related Questions