React-native API call and parse response data

React-native API parse response

To create dynamic applications we need to learn React-native API call and how to parse response data, in short, we have to call web services from our app basically APIs give a response in JavaScript Object Notation (JSON) format it has very easy representation of data in a key-value format like below

{
  "name": "Saurabh",
  "age": 26,
  "city": "Mumbai"
}

Overview

1. API call methods which one better
2. How to use these methods to send data and get the response
3. React-native API call and how to parse response data

API call methods

There are two types of methods GET and POST method, GET method usually use to get response data and POST method used to send data, it is better to use POST method because POST method is more secure than GET method, if you want to send confidential data like username or password then you have to use POST  method you can send these data from header or body, Use GET method when have to just display data let’s start with GET method

GET Method

var url = this.state.baseUrl + 'api/getContactList';
console.log("url:"+url);

fetch(url,{
    method: 'GET',
    headers: {
      'token': this.state.token,         <--- This is how we can pass data from header
      'Content-Type': 'application/json',
    }
}).then(function (response) {
  return response.json();
  }).then(function (result) {            <--- This result will store your call response data
     this.setState({ status: result.status,
     wholeResult: result.result,
   });
}).catch(function (error) {
   console.log("-------- error ------- "+error);
   alert("result:"+error)
});

This response result data will store in the state and use whenever you want,

these state will automatically reflect data change where this state is used in activity or screen

We can send data from the Query parameter see below

var urlParam = '';
let ret = [];

urlParam = ret.join('&');
urlParam = urlParam.concat("&fname=","Saurabh") ;
urlParam = urlParam.concat("&age=","26") ;

var url = this.state.baseUrl + 'api/getContactList' + urlParam;

POST method

var url = this.state.baseUrl + 'api/getContactList';
console.log("url:"+url);

fetch(url,{
 method: 'POST',
 headers: {
   'token': this.state.token, <--- This is how we can pass data from header
   'Content-Type': 'application/json',
 },
 body: JSON.stringify({"fname": "Saurabh", "age": 26})
}).then(function (response) {
    return response.json();
    }).then(function (result) { <--- This result will store your call response data
      this.setState({ status: result.status,
      wholeResult: result.result,
    });
}).catch(function (error) {
    console.log("-------- error ------- "+error);
    alert("result:"+error)
});

This is how we can send data from the body using POST method

put this code into one method and call this method in componentWillMount() this method get called before components get a mount, this method called once in the life cycle of react-native before the render method calls so do all you want before rendering method otherwise data will not display complete

make sure your method must bind in the constructor like below

constructor(props) {
   super(props);  
    this.MethodName= this.MethodName.bind(this);
}

After that just call the method like

 this.MethodName();

How to use a response and parse this data

To parse normal object you can use the dot notation like below if we have result name object then you get data by typing

result.keyName

and if keyName is array or list then you have to use parse like as below

 {result.keyName.map(function(obj, index){
         return <View key={ index }><Text style={welcome}>{obj.name}</Text></View>;
       })}

In above code, obj is a single object from the keyName list

this is how we can parse data from the response, to learn more about API response, rendering data check this post

Thank you 🙂