CODEWITHSUNDEEP
vue.jsaxios
Jun Dolor
Jun Dolor

Reputation: 639

How do I make an axios request to a local JSON file in my Vue project

I have a JSON file in my Vue JS project, nested in the folder structure

src/assets/json/people.json

I'm trying to make an axios request to the json resource in my App.vue file

export default {
  name: "App",
  data: function() {
    return {
      people: []
    }
  },
  created: function() {
    this.fetchPeople();
  },
  methods: {
    fetchPeople: function() {
      let url = "./src/assets/json/people.json"
      axios.get(url)
      .then(res => {
       this.people = JSON.parse(res);
      })
    }
  }
};

On my console, I'm getting the error below:

Failed to load resource: the server responded with a status of 404 (Not Found)
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:59)

Upvotes: 0

Views: 488

Answers (1)

Naor Levi
Naor Levi

Reputation: 1823

Why would you that?

import people from "./src/assets/json/people.json"

would probably do the work.

Axios is an HTTP agent to fetch data from a remote server. If the file is local, just import it.

Upvotes: 2

Related Questions