Insert variables from axios response into exported const

Question

I am using axios in my vue.js project to do an HTTP POST and gather some variables for a vue-echart. I am trying to figure out the best way to do this and have somewhat hit a roadblock.

This is what is in my dashboard.vue file:

<script>

import { echartBar, echartPie } from "@/data/echarts";

import { echart1, echart2, echart3 } from "@/data/dashboard1";

export default {
  metaInfo: {
    title: "Dashboard v1"
  },
  mounted () {
    axios
      .post('https://testsite.com', 'Request data here')
      .then(response => {
        this.dataNeeded = response.data
        console.log(info)
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  },
  data() {
    return {
      echartBar,
      echartPie,
      echart1,
      echart2,
      echart3,
    };
  }
};
</script>
<style>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

Then, here's the exported const from echarts.js:

var dark_heading = "#c2c6dc";
var chartLabels = ['Test1', 'Test2']

import { zoomBarData } from '@/data/echartSeries'

// start::echartBar
export const echartBar = {
        legend: {
            borderRadius: 0,
            orient: 'horizontal',
            x: 'right',
            data: chartLabels
        },
        grid: {
            left: '8px',
            right: '8px',
            bottom: '0',
            containLabel: true
        },
        tooltip: {
            show: true,
            
            backgroundColor: 'rgba(0, 0, 0, .8)'
        },
        
        xAxis: [{
            type: 'category',
          
            data: dataNeeded.months,
            axisTick: {
                alignWithLabel: true,
               
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: dark_heading,
            },
            axisLine: {
                show:true,
                color: dark_heading,
                
                lineStyle: {
                color: dark_heading,
                
                }
            }
        }],
        yAxis: [{
          type: 'value',
          
        
          axisLabel: {
            color: dark_heading, 
            formatter: '${value}'
        },
        axisLine: {
            show:false,
            color: dark_heading,
            
            lineStyle: {
            color: dark_heading,
            
            }
        },
          min: 0,
          max: 100000,
          interval: 25000,
      
          splitLine: {
              show: true,
              interval: 'auto'
          }
      }],
 

  series: [{
          name: chartLabels[0],
          data: dataNeeded.amounts,
          label: { show: false, color: '#0168c1' },
          type: 'bar',
          barGap: 0,
          color: '#bcbbdd',
          smooth: true,
          itemStyle: {
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: -2,
                  shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
          }
      },
      {
          name: chartLabels[1],
          data: dataNeeded.amounts2,
          label: { show: false, color: '#639' },
          type: 'bar',
          color: '#7569b3',
          smooth: true,
          itemStyle: {
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: -2,
                  shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
          }
      }

  ]
}

Basically, if I'd like to use data coming back from the axios request (JSON) in place of the data listed in echarts.js (being an exported const), what would be my best option?

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Dec 02 '20 at 21:45
I'm not the biggest HTTP verb stickler, but why are GETting data with a POST request? — Jared Smith, Dec 02 '20 at 21:46
I don't think that answers my question - seems a bit different than what I'm looking for. I have an exported const from a different file that is being imported into the same page that has the axios request. From here, I need to put some of the response variables into the imported const. The endpoint is requiring a POST that returns some info. Apologies if I'm not making much sense. — David Gonzalez, Dec 02 '20 at 21:58
The const is basically returning a plain object. Axios will probably also receive such an object. So did you try setting your echartBar variable to the axios response, like `this.echartBar = response`? — Maarten Veerman, Dec 02 '20 at 22:10
@MaartenVeerman, it'd likely be `this.echartBar = response.data` that the OP would want instead, though you might have to go deeper, depending on the structure of the response. — marsnebulasoup, Dec 02 '20 at 22:14
Seems to me like you should be passing this response to a piechart/barchart component, then have the piechart component responsible for merging the relevant data based on the context of the chart. — Tim Wickstrom, Dec 02 '20 at 23:31
@MaartenVeerman If I'm not mistaken, this would replace 'echartBar' with the response data. I just want to use the response data within the 'echartBar' const that was imported. I updated the second file above with 'dataNeeded' showing the data that I would like to place there from the axios response. — David Gonzalez, Dec 03 '20 at 14:23
So let's assume you have response data, and there is a variable `response.data.months`. Did you try setting the eChart data like so: `this.echartBar.xAxis[0].data = response.data.months` ? — Maarten Veerman, Dec 03 '20 at 15:49
@MaartenVeerman Awesome, that works for me. If you'd like to add that as an answer, I can mark it - that did the trick though! I'll try filling in more information and see how it behaves with a lot of data. Thanks again! — David Gonzalez, Dec 03 '20 at 16:01

score 1 · Accepted Answer · answered Dec 03 '20 at 17:46

The const is basically returning a plain object. Axios will receive the object data, which you can simply access or assign its values to other objects.

In your case, you may assign a value to the echartBar object in the scope of your component like so:

this.echartBar.xAxis[0].data = response.data.months

This assumes you have a months property in your response data.

This process can be cumbersome especially when you have a lot of properties on the echartBar object like you have. You'll need to check for arrays in arrays etc. Libraries like lodash might be helpfull in that case, for example its set function: https://lodash.com/docs/4.17.15#set

Insert variables from axios response into exported const

1 Answers1