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": "[email protected]",
        "phone": "0171551223366",
        "category": "2",
        "timestamp": 12.3
    },
    {
        "id": 2,
        "title": "homework",
        "detail": "nothing details",
        "status": "1",
        "url": "www.google.com",
        "mail": "[email protected]",
        "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.

responseJson is already an array. Not clear what your specific problem is — charlietfl
– charlietfl, Commented Mar 26, 2019 at 18:38
sorry, I was not understanding this before. But after your suggestion I wrote console.log(response[0].title) & got some value from the JSON reponse. So, Thanks — S. M. Asif
– S. M. Asif, Commented Mar 26, 2019 at 18:54

Masuk Helal Anik · Accepted Answer · 2019-03-26 18:49:03Z

2

It should be working.Otherwise you can do this

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

answered Mar 26, 2019 at 18:49

Masuk Helal Anik

2,28624 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related