React Native Fetch API | Parsing JSON Files

Posted by Adarshreddy Adelli

Friday, October 25, 2019

Finally, I'm writing my third Post on React Native, you might say this author love parsing JSON or XML feeds. of course, I do, but this might also be an exciting part for most of our developer family. In my previous posts, I have covered Getting Started with React Native and Webview in React Native and this time more interesting parsing JSON in react native.

If you are new to API party read this post

Now fire up your environments and start!

Edit our App.js file and start by importing the required packages

 import React from 'react';  
 import { FlatList, ActivityIndicator, Text, View } from 'react-native';  

Then export your project class with the react component. Let's fetch gspace API.

 export default class FetchExample extends React.Component {  
  constructor(props){  
   super(props);  
   this.state ={ isLoading: true}  
  }  
  componentDidMount(){  
   return fetch('https://www.googleapis.com/blogger/v3/blogs/6041987638358622721/posts?key=AIzaSyCP4co0djhII1KUifQaVuiKCgFXyP0jfNM')  
    .then((response) => response.json())  
    .then((responseJson) => {  
     this.setState({  
      isLoading: false,  
      dataSource: responseJson.items,  
     }, function(){  
     });  
    })  
    .catch((error) =>{  
     console.error(error);  
    });  
  }  

Here I have used blogger API provided by google cloud because raw JSON of gspace is somewhat claggy. You can also post, do much more with new blogger API, just check its documentation. I have added a loader animation that is displayed while loading the API.

Now its time to render the above JSON response and put it in a view.

 render(){  
   if(this.state.isLoading){  
    return(  
    )  
   }  
   return(  
          data={this.state.dataSource}  
      renderItem={({item}) => {item.title}, {item.author.displayName}}  
      keyExtractor={({id}, index) => id}  
     />  
   );  
  }  
 }  

Then run the code to view the output.

Gist for entire code

Adarshreddy Adelli Friday, October 25, 2019 android App development Nodejs react-native