How to use axios response in other const?

Question

i am new in react js, i have made function to call database value using axios. I put the response in a function and const. I already call the function and want to use the const inside the function in other const, but i get undefined error.

Here is my code in js :

import axios from 'axios';

/*axios.get('http://localhost:3001/process')
     .then((response) => {
       console.log(response); // Hasil yang benar
       return response;
     });*/

     const getValueAxios = async () => {
      try {
         const resGet = await axios.get('http://localhost:3001/process')
         console.log(resGet)
      } catch (error) {
         console.log(error);
      }
   }

   getValueAxios();

const eChart = {
  series: [
    {
      name: "Sales",
      data: [resGet[0].value, resGet[1].value, resGet[2].value, resGet[3].value, resGet[4].value, resGet[5].value, resGet[6].value, resGet[7].value, resGet[8].value, resGet[9].value, resGet[10].value, resGet[11].value],
      color: "#fff",
    },
  ],

  options: {
    chart: {
      type: "bar",
      width: "100%",
      height: "auto",

      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
        borderRadius: 5,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 1,
      colors: ["transparent"],
    },
    grid: {
      show: true,
      borderColor: "#ccc",
      strokeDashArray: 2,
    },
    xaxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      labels: {
        show: true,
        align: "right",
        minWidth: 0,
        maxWidth: 160,
        style: {
          colors: [
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
          ],
        },
      },
    },
    yaxis: {
      labels: {
        show: true,
        align: "right",
        minWidth: 0,
        maxWidth: 160,
        style: {
          colors: [
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
            "#fff",
          ],
        },
      },
    },

    tooltip: {
      y: {
        formatter: function (val) {
          return "Rp. " + val + " millions";
        },
      },
    },
  },
};

export default eChart;

it give me error like this " Line 24:14: 'resGet' is not defined no-undef" in here :

[resGet[0].value, resGet[1].value, resGet[2].value, resGet[3].value, resGet[4].value, resGet[5].value, resGet[6].value, resGet[7].value, resGet[8].value, resGet[9].value, resGet[10].value, resGet[11].value]

Answer 1

I would like to export a function getEChart() instead of the eChart object because the eChart object is dependent on API response. Then you can call this function using wherever you need eChart.

import axios from 'axios';

const getValueAxios = async () => {
  try {
    let resGet = await axios.get('http://localhost:3001/process')
    console.log(resGet)
    return resGet;
  } catch (error) {
    console.log(error);
  }
}

const getEChart = async () => {
  const resGet = await getValueAxios();

  const eChart = {
    series: [{
      name: "Sales",
      data: [resGet[0].value, resGet[1].value, resGet[2].value, resGet[3].value, resGet[4].value, resGet[5].value, resGet[6].value, resGet[7].value, resGet[8].value, resGet[9].value, resGet[10].value, resGet[11].value],
      color: "#fff",
    }, ],

    options: {
      chart: {
        type: "bar",
        width: "100%",
        height: "auto",

        toolbar: {
          show: false,
        },
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: "55%",
          borderRadius: 5,
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        show: true,
        width: 1,
        colors: ["transparent"],
      },
      grid: {
        show: true,
        borderColor: "#ccc",
        strokeDashArray: 2,
      },
      xaxis: {
        categories: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        labels: {
          show: true,
          align: "right",
          minWidth: 0,
          maxWidth: 160,
          style: {
            colors: [
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
            ],
          },
        },
      },
      yaxis: {
        labels: {
          show: true,
          align: "right",
          minWidth: 0,
          maxWidth: 160,
          style: {
            colors: [
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
              "#fff",
            ],
          },
        },
      },

      tooltip: {
        y: {
          formatter: function(val) {
            return "Rp. " + val + " millions";
          },
        },
      },
    },
  };

  return eChart;
};

export default getEChart;