How To Fetch Series Api-data Reactjs?

i am trying to fetch a series api-data. as per below api-data each series have their own data, for e.g a series 'bannerData' have their data id,banner_title... and next series 'hom

Solution 1:

There are many ways fetch data in react. One of the most common way is to fetch using a package called axios. Since you are using a class-based component, It will look like this.

Here's a working sandbox as per your request.

importReact, { Component } from"react";
import axios from'axios'importDatafrom"./contact.js";

    exportdefaultclassAppextendsComponent {
      state = {
        results: [],
        isLoading: false,
      };

      componentDidMount() {
        this.fetchData();
      }

      fetchData = async () => {
        this.setState({ isLoading: true });
        try {
          const response = await axios.get("http://localhost:8000/api/homepage/");
          this.setState({ results: response, isLoading: false });
        } catch (error) {
          console.log(error);
        }
      };

      render() {
        if (this.state.isLoading) {
          return"Loading...";
        }
        return<Dataresults={this.state.results} />;
      }
    }

You are trying to map an object in your contact.js file. You can always destructure them or you have to explicitly access the array you want using the dot operator and also in react you have to use className instead of just class when using it.

import React from "react";

constData = ({ results }) => {
  if (!results) {
    return"";
  }
  const { bannerData, homecatData } = results;
  return (
    <div><center><h1>Banner Data</h1></center>
      {bannerData.map((bannerData) => (
        <divclassName="card"><divclassName="card-body"><h5className="card-title">{bannerData.banner_title}</h5><h6className="card-subtitle mb-2 text-muted">
              {bannerData.banner_image}
            </h6><pclassName="card-text"></p></div></div>
      ))}

      <center><h1>Home Category Data</h1></center>
      {homecatData.map((homecatData) => (
        <divclassName="card"><divclassName="card-body"><h5className="card-title">{homecatData.category_title}</h5><h6className="card-subtitle mb-2 text-muted">
              {homecatData.category_image}
            </h6><pclassName="card-text"></p></div></div>
      ))}
    </div>
  );
};

exportdefaultData;

Solution 2:

You could fetch from each main json data (bannerData,homecatData,homeproductData)

exportconstfetchbannerData = ()  =>{
        returnfetch(baseurls+'bannerData')
            .then(response => {
                    if (response.ok) {
                        return response;
                    } else {
                        var error = newError('Error ' + response.status + ': ' + response.statusText);
                        error.response = response;
                        throw error;
                    }
                },
                error => {
                    var errmess = newError(error.message);
                    throw errmess;
                })
            .then(response => response.json())
    }

Solution 3:

Axios would help you to fetch api data. type npm I axios on terminal to use axis to fetch data

visit https://www.npmjs.com/package/axios to install axis and learn how to use it

Solution 4:

Using fetch native javascript. You can customize using useEffect, useState, or async-await.

//const React = require("react")//const ReactDOM = require("react-dom")const baseURL = "https://api.whatdoestrumpthink.com/api/v1/quotes/";
classAppextendsReact.Component {
  state = {
    quotes: [],
    loading: false,
  };

  componentDidMount() {
    this.getQuotes();
  }
  getQuotes() {
    this.setState({ loading: true });
    try {
      fetch(baseURL)
        .then(response => response.json())
        .then((response) => {
          this.setState({
            quotes: response.messages.personalized,
            loading: false,
          });
        });
    } catch (error) {
      console.log(error);
      this.setState({ loading: false });
    }
  }

  render() {
    const { quotes, loading } = this.state;
    if (loading) {
      return"Loading Quotes...";
    }
    return<Quotesquotes={quotes} />;
  }
}
functionQuotes({ quotes = [] }) {
  return quotes.map((quote, index) => (<divkey={index}>{quote}</div>));
}
ReactDOM.render(<App />, document.getElementById("root-app"));

<divid="root-app"></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>