What is the best way to invoke a Rest API within a Vue component?

Question

What is the best way to invoke a Rest API within a Vue component?

As a newcomer to VueJS, my goal is to create a basic page featuring a pie chart displaying some data. Currently, I have successfully displayed the chart using example data. However, I now wish to populate the chart with data fetched from an API call on my backend

http://127.0.0.1:8000/user/getamount

.

Below is the code snippet:

chart.js

import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import HighchartsVue from "highcharts-vue";
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
Vue.use(VueAxios, axios)


new Vue({
  el: "#app",
  render: h => h(App),
});

App.vue

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
  </div>
</template>

<script>

export default {
  data() {
    return {
      chartOptions: {
        series: [{

           type: 'pie',
           name: 'Browser share',
           data: [
              ['Firefox',   45.0],
              ['IE',       76.8],
              ['Safari',    8.5],
              ['Opera',     6.2],
              ['Others',   0.7]
           ]
        }],

      }
    };
  }
};
</script>

Being new to Vue, I'm unsure where to execute the API request in this setup. While I have seen examples utilizing axios for API calls and data presentation, my scenario requires the data to be within the component for the chart to function properly. Should I make the API call directly from the component? Or am I overlooking something essential?

javascript vue.js highcharts vuejs2 vue-component

Answer 1

Answer №1

To handle loading data in your application, first define the variable but initialize it as null:

series: [{
   type: 'pie',
   name: 'Browser share',
   data: null
}],

In the created hook (marked as async for async/await pattern), use axios to fetch and load the data:

import axios from 'axios';
export default {
  data() {
  ...
  },
  async created() {
    const response = await axios.get(...);  // Fetch data from your API endpoint
    this.chartOptions.series[0].data = response.data;  // Assign retrieved data to the chart
    // `response.data` should include:
    /*
      [
        ['Firefox',   45.0],
        ['IE',       76.8],
        ['Safari',    8.5],
        ['Opera',     6.2],
        ['Others',   0.7]
      ]
    */
  }
}

Check out this sandbox example that simulates this process using a setTimeout

Answer 2

To handle loading data in your application, first define the variable but initialize it as null:

series: [{
   type: 'pie',
   name: 'Browser share',
   data: null
}],

In the created hook (marked as async for async/await pattern), use axios to fetch and load the data:

import axios from 'axios';
export default {
  data() {
  ...
  },
  async created() {
    const response = await axios.get(...);  // Fetch data from your API endpoint
    this.chartOptions.series[0].data = response.data;  // Assign retrieved data to the chart
    // `response.data` should include:
    /*
      [
        ['Firefox',   45.0],
        ['IE',       76.8],
        ['Safari',    8.5],
        ['Opera',     6.2],
        ['Others',   0.7]
      ]
    */
  }
}

Check out this sandbox example that simulates this process using a setTimeout

Answer 3

Answer №2

import axios from 'axios';

 data () {
  return {
    fetchedData: []
  }
  },
  methods: {
    fetchData() {
        axios.get('https://127.0.0.1:8000/user/getdata')
      .then((result) => {
        this.fetchedData = result.data;
      })
    }
  },
  mounted() {
  this.fetchData();
  }
})

If you want to display it in html, then you make a loop.

<div v-for="dataItem in fetchedData" :key="dataItem.id">
{{dataItem}}
</div>

Answer 4

import axios from 'axios';

 data () {
  return {
    fetchedData: []
  }
  },
  methods: {
    fetchData() {
        axios.get('https://127.0.0.1:8000/user/getdata')
      .then((result) => {
        this.fetchedData = result.data;
      })
    }
  },
  mounted() {
  this.fetchData();
  }
})

If you want to display it in html, then you make a loop.

<div v-for="dataItem in fetchedData" :key="dataItem.id">
{{dataItem}}
</div>

Answer 5

Answer №3

If you need data to load in your new component, simply create a function within the component. For example, if you are working with a chart component, you can use Axios to make a request for the necessary data. Here is an example of how the script section might appear:

<script>
import axios from 'axios';

    export default {
      data () {
        return {
          graph_data: [],
        }
      },
      created () {
        this.fetchGraphData()
      },

      methods: {
        fetchGraphData() {
           axios.get('your_address')
             .then(function (response) {
               //Fill your data here
             })
        }
     }
</script>

Answer 6

If you need data to load in your new component, simply create a function within the component. For example, if you are working with a chart component, you can use Axios to make a request for the necessary data. Here is an example of how the script section might appear:

<script>
import axios from 'axios';

    export default {
      data () {
        return {
          graph_data: [],
        }
      },
      created () {
        this.fetchGraphData()
      },

      methods: {
        fetchGraphData() {
           axios.get('your_address')
             .then(function (response) {
               //Fill your data here
             })
        }
     }
</script>

What is the best way to invoke a Rest API within a Vue component?

Answer №1

Answer №2

Answer №3

Similar questions

Error code 403 is returned when attempting to send an ajax Post request, indicating

Enhancing middleware chaining in Express

Tips on viewing class object values within the `useEffect` hook

Utilizing the 'container' property in a React.js React-Bootstrap modal

Using Node.js to send a response only after every promise has been resolved

Tips for identifying and swapping values/parameters in a URL during redirect

Uncovering data from a dynamic website through the combination of Selenium and PhantomJS

parsing and building a sophisticated JSON object

Encountering an error while testing a Vue component with v-dialog in Vitest: TypeError - globalStack.at is not a function

The package.json file engines field specifying the version with a tilde and then a greater than sign (~>)

Having trouble accessing object properties fetched via API, receiving the error message "TypeError: Cannot read property '' of undefined" in Next.js with JavaScript

"Encountering a 404 error in a JQuery Ajax POST request when trying to send

Displaying the second div once the first div has loaded, then concealing the first div

The Vue Multiselect feature lacks accessibility for screen readers when in a disabled state

Delay the v-alert display after an item is added to the array basket using setTimeout

angular primeng table has a checkbox to select all checkboxes

Encountering an "Unmet Peer Dependency" error message while attempting to integrate bootstrap-ui into my Angular project

The Javascript executor in Selenium is delivering a null value

Unable to pass the jQuery value - troubleshooting tips for Laravel

The error handler in AngularJS $http service is always left wanting for a call