How to parse JSON array from a GET request in react-native?

Question

I am making GET request call from my react-native code and the response of the GET request is like below-

[
    {
        "id": 1,
        "title": "homework",
        "detail": "nothing details",
        "status": "1",
        "url": "www.google.com",
        "mail": "a@a.com",
        "phone": "0171551223366",
        "category": "2",
        "timestamp": 12.3
    },
    {
        "id": 2,
        "title": "homework",
        "detail": "nothing details",
        "status": "1",
        "url": "www.google.com",
        "mail": "a@a.com",
        "phone": "0171551223366",
        "category": "2",
        "timestamp": 12.3
    }
]

In case, if it was a simple json response, there was no problem at all with parsing but in case, this is an array, I am not getting how to get and save them in an array.

Here I have given my code-

import React from 'react';
import { StyleSheet, Text, View, Image, AsyncStorage, ActivityIndicator } from 'react-native';
import {Icon, Button, Container, Header, Content, Left} from 'native-base';
import CustomHeader from './CustomHeader';

let jwt=''
 class NoteMeHome extends React.Component {


   state = {
      getValue: '',
      dataSource:[],
      isLoading: true
    }


  componentDidMount() {
    AsyncStorage.getItem("token").then(value => {
      console.log(value);
      jwt = value;

      this.setState({
        getValue: value,
      });
    });

    const url = 'my url';
    fetch(url, {
      method: 'GET',
      headers: new Headers({
        'Content-Type' : 'application/json',
        'token': 'abcd',
        'jwt': jwt
      })
    })
    .then((response)=> response.json() )
    .then((responseJson) => {
      console.log('####:'+responseJson.title)
      this.setState({
        dataSource: responseJson,
        isLoading: false
      })
    })
    .catch((Error) => {
      console.log(Error)
    })


  }

  static navigationOptions = ({navigation}) => ({
    title: "Home",
    headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
    onPress={()=>navigation.navigate('DrawerOpen')}/>,

    drawerIcon: 

    <Image source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}
            style={styles.icon}
    />
  })



  render() {
    const { getValue } = this.state;

    return(
      this.state.isLoading
      ?
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <ActivityIndicator size="large" color="#330066" animating/>
      </View>
      :
      <Container>
        <CustomHeader
          title="Home"
          drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
        />
        <Content contentContainerStyle={{flex:1, alignItems:'center', 
        justifyContent:'center', padding:10}}>
        <Button full onPress={()=> this.props.navigation.navigate('Settings')}>
          <Text style={{color:'white'}}>Go To Settings</Text>
        </Button>
        <Text>{this.state.getValue}</Text>
        </Content>
      </Container>
    )
  }



}



const styles = StyleSheet.create({
  icon:{
    height: 24,
    width: 24
  }
})
export default NoteMeHome;

So, it would be very nice if anyone helps me out with this code and suggest how save the data from json response to an array.

Answer 1

It should be working.Otherwise you can do this

 for (var i = 0; i < responseJson.length; i++){ this.state.dataSource.push({ ... }) }