[FIXED] Axios Get using Flask database React js

Issue

I am new to webpage development and i have a question to ask. I am having issues getting data from my database when my python backend is in a certain format. Do let me know if it is a backend code error or a frontend code error.

My react js code is as such:

useEffect(() => {
    const fetchRevenue = async () => {
      try{
        const response = await api.get('/revenue/');
        setDbdata(response.data);
      } catch(err) {
        console.log(`Error: ${err.message}`);
      }
    }
    fetchRevenue();
  },[])

My backend code is as such:

@app.route("/revenue/")
def revenue():
    results = { "revenue_data": 
    [
            {
                "id":1,
                "location":"Mordor",
                "highest_transaction":41,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":2,
                "location":"Orang Utan",
                "highest_transaction":43,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":3,
                "location":"Prchar",
                "highest_transaction":441,
                "lowest_transaction":10,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            }
        ]}
    
    return jsonify(command="Revenue",category="success",data=results,status=200)

I do not know if the issue is my frontend code or backend code. When my backend is like this i am able to receive the data:

@app.route("/revenue/")
def revenue():
    revenue_data = [
            {
                "id":1,
                "location":"Mordor",
                "highest_transaction":41,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":2,
                "location":"Orang Utan",
                "highest_transaction":43,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":3,
                "location":"Prchar",
                "highest_transaction":441,
                "lowest_transaction":10,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            }
        ]
    
    return jsonify(revenue_data)

Solution

!!!SOLVED!!! Amateur mistake. First off, my backend has multiple path but i added

app.run(port=5000)

after each path. This makes my api call to backend to fail which prevents me from troubleshooting.

Once i fixed that message i am able to console.log the data that i am receiving.

When i console.log(response.data) i read this:

return jsonify(command="Revenue",category="success",data=results,status=200)

then i tried console.log(response.data.data) that brought me into the object and finally when i used console.log(response.data.data.revenue_data) i got my array.

Answered By - MehBenMeh