CODEWITHSUNDEEP
javascriptvue.jsaxios
pedrocxb
pedrocxb

Reputation: 43

Display data on the browser console with vue-axios

I have a .json file which I need to display its data on the browser console. I'm working with Vue.js and using vue-axios to fetch data from the .json file. Here is the code I have on the script tag to do so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
import countries from "./charts/countries.vue";
import axios from "axios";

//const http = axios.create();

export default {
  components: {
    countries
    //languagues
  },
  mounted() {
    axios
      .get("./MOCK_DATA.json")
      .then(Response => window.console.log(Response.data));
  }
};
</script>

I've tried axios.get(...) and I've also tried setting a variable http, which is commented above "export default" and using it, instead of "axios.get(...)". I keep getting these same errors on the browser console:

Failed to load resource: the server responded with a status of 404 (Not Found) :8080/MOCK_DATA.json:1
createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:61)

P.S.: The file in which I'm working is App.vue and it's on the "src" folder as well as the "MOCK_DATA.json" file which leads me to believe it's not a path error.

Upvotes: 2

Views: 1054

Answers (1)

Asimple
Asimple

Reputation: 650

You just need to move your file to public dir, where index.html is and do this request:

    axios
      .get("/MOCK_DATA.json") //Without dot
      .then(Response => window.console.log(Response.data));

It's because Vue dev server looks for files in those dir.

Upvotes: 2

Related Questions