Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 What is API?

It is used to provide data communication from one application to another, API will be developed by any server-side script such as Java, Python, PHP, NODE, etc.


What is RestAPI?

RestAPI is used to transfer the data using the HTTP method and return output data into JSON format.

It provides better performance as compare to SOAP-based API.

REST means Representation state transfer-based API.


List of HTTP Request methods


GET - is used to request data from a specified resource.
POST - is used to send data to a server to create a resource.
PUT - is used to send data to a server to update a resource.
DELETE - is used to delete the specified resource.


How to write code on REST API services implementation?

1) AXIOX

2)  Fetch


now we implement an example of the Fetch API method of React JS to show data in tabular format.


Step1st:-


1)  Create a Component and Write the following code. of React Js



import React from "react";


export class RestApiCall extends React.Component{


    constructor()

    {

        super();

        this.state = {

           tdata:[]      

         }

   

    }

    componentDidMount() {

        fetch('http://jsonplaceholder.typicode.com/todos')

        .then(res => res.json())

        .then((data) => {

          this.setState({ tdata: data })

          console.log(this.state.tdata)

        })

        .catch(console.log)

      }

    render()

    {

        return(

            <div>

           <table border='1'>


           <tbody>

               <tr><th>Userid</th><th>ID</th><th>Title</th></tr>

               {this.state.tdata.map((person,i)=> <TableRow Key={i} data={person} />)}   

           </tbody>


           </table>



            </div>

        )

        

    }


}


class TableRow extends React.Component {

    render() {

       return (

          <tr>

             <td>{this.props.data.userId}</td>

             <td>{this.props.data.id}</td>

             <td>{this.props.data.title}</td>

             

          </tr>

       );

    }

 }

 


Another example of API to fetch data from the named key:-

import React from "react";
export class RestAPIExample extends React.Component
{
   constructor()
   {
    super();

    this.state = {

       tdata:[]      

     }
   }

   componentDidMount()
   {
    fetch('https://shivaconceptsolution.com/webservices/showreg.php')

    .then(res => res.json())

    .then((data=> {

      this.setState({ tdata: data["result"] })

      console.log(this.state.tdata)

    })

    .catch(console.log)
   }

   render()

   {

       return(

           <div>
               <table border='1'>

               <tbody>
                  <tr><th>Username</th><th>EmailID</th><th>Password</th></tr>
                  {this.state.tdata.map((person,i)=> <TableRow Key={i} data={person} />)}   
                  </tbody>
               </table>
               <h1>Welcome in REST API Implementation in React JS</h1>
           </div>
       )
   }
}


class TableRow extends React.Component
{
    render()
    {
        return(

            <tr>

             <td>{this.props.data.UserName}</td>

             <td>{this.props.data.emailid}</td>

             <td>{this.props.data.password}</td>

             

          </tr>
        )
    }
}



Example of HttpPOST:-

import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
   constructor()
   {
    super();

    this.state = {}
   }

   componentDidMount()
   {
    fetch('https://jsonplaceholder.typicode.com/posts',{
      method: 'POST',
      body: JSON.stringify({
          title:'check',
          body:'mno',
          userID:1023
      }),
      headers:{"content-type":"application/json; charset=UTF-8"}  
    }).then(res => res.json())

    .then((data=> {

       console.log(data)

    })

    .catch(console.log)
   }



   render()

   {

       return(

           <div>
             <h1>POST METHOD</h1>
           </div>
       )
   }
}





Example of POST API using other Web services:-

import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
   constructor()
   {
    super();

    this.state = {}
   }

   componentDidMount()
   {
    fetch('https://shivaconceptsolution.com/webservices/reg.php',{
      method: 'POST',
      body: JSON.stringify({
          name:'reacttest',
          pwd:'react123',
          email:'ravikumarsharma@gmail.com'
      }),
      headers:{"content-type":"application/json; charset=UTF-8"}  
    }).then(res => res.json())

    .then((data=> {

       console.log(data)

    })

    .catch(console.log)
   }



   render()

   {

       return(

           <div>
             <h1>POST METHOD</h1>
           </div>
       )
   }
}






API method for  Update operation using post method


import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
   constructor()
   {
    super();

    this.state = {}
   }

   componentDidMount()
   {
    fetch('https://jsonplaceholder.typicode.com/posts/1',{
      method: 'PUT',
      body: JSON.stringify({
          title:'check',
          body:'mno',
          userId:1023

      }),
      headers:{"content-type":"application/json; charset=UTF-8"}  
    }).then(res => res.json())

    .then((data=> {

       console.log(data)

    })

    .catch(console.log)
   }



   render()

   {

       return(

           <div>
             <h1>PUT Method for data updation</h1>
           </div>
       )
   }
}





API for method delete:-


import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
   constructor()
   {
    super();

    this.state = {}
   }

   componentDidMount()
   {
    fetch('https://jsonplaceholder.typicode.com/posts/'+1,{
      method: 'delete' })
   }



   render()

   {

       return(

           <div>
             <h1>Delete Method for data updation</h1>
           </div>
       )
   }
}











Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post