If you are a beginner for Reactjs and trying to improve yourself with a test project and you are looking for calling and fetching the data from the rest API using Axios then you have come to the right place.

In this project, we will set up a structure such that the UI component will connect to REST API, and use the returned data this has many examples on the internet but in this article, we are going to discuss the same concept using Axios.

For showing you an example I’m using the below example API for getting the data.

1.GET http://restapi.adequateshop.com/api/TravelAgent

Json Response

[
{
"id": 122409,
"agent_name": "Mike",
"agent_email": "mike921@.com",
"agent_location": "Paris",
"createdat": "2022-05-20T07:15:59.7729513"
},
{
"id": 122408,
"agent_name": "Mike",
"agent_email": "mike921@gmail.com",
"agent_location": "Paris",
"createdat": "2022-05-20T07:13:06.7843333"
},
{
"id": 122407,
"agent_name": "KartikBandi",
"agent_email": "bandikarthik@gmail.com",
"agent_location": "Armoor",
"createdat": "2022-05-20T07:08:22.5717523"
},
{
"id": 122391,
"agent_name": "guruswamy",
"agent_email": "guruswamy12@gmail.com",
"agent_location": "india",
"createdat": "2022-05-20T05:32:35.1775134"
},
{
"id": 122389,
"agent_name": "sdsd",
"agent_email": "sdsd@gmail.com",
"agent_location": "sdsd",
"createdat": "2022-05-20T05:27:51.8326946"
},
{
"id": 122388,
"agent_name": "dhiraj shende",
"agent_email": "ds1j@sdshghdk.com",
"agent_location": "IND",
"createdat": "2022-05-20T05:27:40.5961154"
},
{
"id": 122387,
"agent_name": "yashwitha",
"agent_email": "OZSZDW@gmail.com",
"agent_location": "US",
"createdat": "2022-05-20T05:11:38.4162423"
},
{
"id": 122079,
"agent_name": "rupal",
"agent_email": "rupall22@gmail.com",
"agent_location": "india23232",
"createdat": "2022-05-19T13:10:26.8226353"
},
{
"id": 122078,
"agent_name": "abhishek",
"agent_email": "abhishek80@gmail.com",
"agent_location": "india",
"createdat": "2022-05-19T13:07:22.3235079"
},
{
"id": 122077,
"agent_name": "mahendra",
"agent_email": "mahendra98@gmail.com",
"agent_location": "rRatlam",
"createdat": "2022-05-19T13:05:09.2087452"
},
{
"id": 122076,
"agent_name": "Dnady",
"agent_email": "dandywdasd@gmail.com",
"agent_location": "iNdoneisa",
"createdat": "2022-05-19T13:03:27.5413588"
},
{
"id": 122074,
"agent_name": "dhiraj shende",
"agent_email": "ds1j@sdsdkjkdjddhjs.com",
"agent_location": "IND",
"createdat": "2022-05-19T13:01:08.7516211"
},
{
"id": 122072,
"agent_name": "Elif Sinano?lu",
"agent_email": "elif.sinanoglu@example.com",
"agent_location": "Bart?n",
"createdat": "2022-05-19T12:57:33.6831017"
},
{
"id": 122069,
"agent_name": "Ilija Milanoski",
"agent_email": "${RndEmail}.com",
"agent_location": "Vigo",
"createdat": "2022-05-19T12:56:56.2610036"
},
{
"id": 122068,
"agent_name": "Jesus Benitez",
"agent_email": "jesus.benitez@example.com",
"agent_location": "Vigo",
"createdat": "2022-05-19T12:56:55.8662293"
},
{
"id": 122064,
"agent_name": "Cecilie Wojcik",
"agent_email": "cecilie.wojcik@example.com",
"agent_location": "Bud",
"createdat": "2022-05-19T12:56:14.4489244"
},
{
"id": 122061,
"agent_name": "Xavier Ross",
"agent_email": "xavier.ross@example.com",
"agent_location": "Keswick",
"createdat": "2022-05-19T12:55:41.3629308"
},
{
"id": 122056,
"agent_name": "Ilija Milanoski",
"agent_email": "kenan.cetin@example.com",
"agent_location": "Van",
"createdat": "2022-05-19T12:55:12.2889649"
},
{
"id": 122019,
"agent_name": "nimisha",
"agent_email": "n",
"agent_location": "USA",
"createdat": "2022-05-19T12:36:12.6214081"
},
{
"id": 122015,
"agent_name": "dhiraj shende",
"agent_email": "ds1HJjhjjjr323kjskjkjkjl2jkjkjkk3@kjkjjhjhds.com",
"agent_location": "IND",
"createdat": "2022-05-19T12:22:19.3782778"
}
]

If you are looking for a sample rest for testing purposes then visit here, in this article I have listed a sample test API for testing purposes.

For that, I created a FetchDataFn.js file, that is the UI component, and for API calls, using Axios.we are going to Fetch and display data in a table using bootstrap from API in React JS using Axios.

Step 1. Install Axios library in our project

npm install axios –save axios

Step 2.Install bootstrap in our project for using bootstrap table.

npm install react-bootstrap bootstrap

Step 3:Write code

Fetch and display data from API in React JS using Axios

Axios React functional component

FetchDataFn.js

import React, { useState, useEffect } from "react"
import axios from 'axios';
import { Table, Button } from 'react-bootstrap';

const FetchDataFn = () => {
    const [agents, setagent] = useState(null)
    useEffect(() => {
        getagents()
    }, [])
    const getagents = () => {
            axios.get('http://restapi.adequateshop.com/api/TravelAgent').then(response => response.data).then(
                (result) => {
                    setagent(result)
                },
                (error) => {
                    setagent(null);
                }
              )
    }
    if (!agents) return (<div>No Record Found</div>)
    return (
    <div>
        <h2>Fetch data in Funcational Component </h2>
        <Table className='table'>
            <thead className="btn-primary">
              <tr>
                <th>First Name</th>
                <th>EmailId</th>
                <th>Address</th>
                <th>CreatedAt</th>
                
              </tr>
            </thead>
            <tbody>
              {agents.map(agent => (
                <tr key={agent.id}>
                  <td>{agent.agent_name}</td>
                  <td>{agent.agent_email}</td>
                  <td>{agent.agent_location}</td>
                  <td>{agent.createdat}</td>
                </tr>
              ))}
            </tbody>
          </Table>
    </div>
    
    )
}
export default FetchDataFn;

 

Axios React class component

if you are looking for example  Fetch and display data from API in React JS using Axios in class component then look at below example.

import { Table, Button } from 'react-bootstrap';
import axios from 'axios';
import React from 'react';

const apiUrl = 'http://restapi.adequateshop.com';

class FetchData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      agents: [],
      response: {}
    }
  }

  componentDidMount() {
    axios.get(apiUrl + '/api/TravelAgent').then(response => response.data).then(
      (result) => {
        this.setState({
          agents: result
        });
      },
      (error) => {
        this.setState({ error });
      }
    )
  }
  
  render() {
    const { error, agents } = this.state;
    if (error) {
      return (
        <div>Error:{error.message}</div>
      )
    }
    else {
      return (
        <div>

          <Table className='table'>
            <thead className="btn-primary">
              <tr>
                <th>First Name</th>
                <th>EmailId</th>
                <th>Address</th>
                <th>CreatedAt</th>
                
              </tr>
            </thead>
            <tbody>
              {agents.map(agent => (
                <tr key={agent.id}>
                  <td>{agent.agent_name}</td>
                  <td>{agent.agent_email}</td>
                  <td>{agent.agent_location}</td>
                  <td>{agent.createdat}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </div>
      )
    }
  }
}

export default FetchData;

📰 Read more article

While managing web applications in React, the most widely recognized task is to speak with backend servers. This is normally done through HTTP convention.

We are intimately acquainted with the exceptionally normal XML Http Request connection point and Fetch API, which permits us to bring information and make HTTP demands.

There is one more method for speaking with the backend in React, and in this article we will find out about the wonderful library known as Axios and a portion of the critical elements of Axios that have added to its prominence among frontend designers.

So we should get everything rolling.

What is Axios? (A tad of history)
Axios is utilized to speak with the backend and it additionally upholds the Promise API that is local to JS ES6.
It is a library which is utilized to make solicitations to an API, return information from the API, and afterward get things done with that information in our React application.
Axios is an extremely famous HTTP client, which permits us to make HTTP demands from the program.
For what reason Do We Need Axios in React?
Axios permits us to speak with APIs effectively in our React applications. However this can likewise be accomplished by different techniques like get or AJAX, Axios can give a tiny amount of greater usefulness that makes a remarkable difference with applications that utilization React.

Axios is a guarantee based library utilized with Node.js and your program to make nonconcurrent JavaScript HTTP demands.

Whenever we realize we want to execute some guarantee based nonconcurrent HTTP demands in our application, with JavaScript, we normally consider just jQuery’s AJAX or get strategy to take care of business. And keeping in mind that doing as such, we are really conflicting with React!! Did you see that?

The post React Js- Fetch data from API on button click appeared first on Software Development | Programming Tutorials.



Read More Articles