Question 2360 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to fetch data from database – WordPress

I am building a wordpress plugin in which I have implement a widget which shows analytics chart from the wordpress data table named dummy using rest api but I am failing to do so. I am using reactjs for building plugin and axios for fetching data from database and recharts for showing analytics chart.

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import axios from 'axios';


const API_URL = "http://localhost/wordpress2/wp-json/wp/v2?query=dummy"

const Dashboard = () => {
    axios.get(API_URL)
    .then(Response => {console.log(Response.data);

  }).catch(err => console.log(err));

    return (
        <div className='dashboard'   >
            <div className="card" >
                <h3>Analytics</h3>
                <ResponsiveContainer>
                    <LineChart  data={Response}>
                        <XAxis dataKey="post" />
                        <YAxis />
                        <Legend/>
                        <Tooltip />
                        <CartesianGrid stroke="#eee"   />
                        <Line type="monotone" dataKey="likes" stroke="#8884d8" />
                        <Line type="monotone" dataKey="dislikes" stroke="#82ca9d" />
                    </LineChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}


export default Dashboard;

In my wordpress dashboard plugin is working well and chart is also showing but without data it will show when apiurl problem is solved.

Tags:

3

Answers


  1. 0

    Hey @Jit you need to call axios inside useEffect hook like-

    const[data,setData] = useState()
useEffect(()=>{
    const apiData = axios.get(API_URL)
        .then(Response => {
            console.log(Response.data);
        })
        .catch(err => console.log(err));

    if (apiData.length>0){
        setData(apiData);
    }
}, []);

    try this code, if you still facing issue lemme know. I will help you more.
    Thanks

    Login or Signup to reply.
  2. 0

    so normally you have to see your data in the console beside i suggest you to do it into the useEffect hook (see @varun-kaklia response) . Btw, you have to store you data somewhere in order to use it (here with your LineChart component).

    What i suggest you to do is to store you data in the easiest store in react : the useState.

        import React, { useEffect, useState } from 'react';
    import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
    import axios from 'axios';


    const API_URL = "http://localhost/wordpress2/wp-json/wp/v2?query=dummy"

    const Dashboard = () => {
       const [data, setData] = useState(null);

       useEffect(() => {
           axios.get(API_URL)
            .then(Response => { setData(Response.data) })
            .catch(err => console.log(err));
       }, []);
    
    if (!data) return <p>Loading...</p>;

    return (
        <div className='dashboard'>
            <div className="card">
                <h3>Analytics</h3>
                <ResponsiveContainer>
                <LineChart data={data}>{/* Here you use the state data */}
                    <XAxis dataKey="post" />
                    <YAxis />
                    <Legend/>
                    <Tooltip />
                    <CartesianGrid stroke="#eee"   />
                    <Line type="monotone" dataKey="likes" stroke="#8884d8" />
                    <Line type="monotone" dataKey="dislikes" stroke="#82ca9d" />
                </LineChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}
    Login or Signup to reply.
  3. 0

    I went through your code and found some errors in that. Try this code for calling the API

    useEffect(() => {
       axios({
       method:'get', 
       url: 'http://localhost/wordpress2/wp-json/wp/v2?query=dummy'
       })
        .then(Response => { setData(Response.data) })
        .catch(err => console.log(err));
   }, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search