How can I utilize Axios in Vue.js to access a local JSON file?

Question

How can I utilize Axios in Vue.js to access a local JSON file?

I'm trying to figure out how to read a local JSON file using Axios. The data.json file is located in public/info/data.json. However, every time I attempt to make a get request, I receive a 404 error message.

Here is the content of data.json:
[
{"id": 1239,"name": "Card 1"},
{"id": 1235,"name": "Card 2"},
{"id": 1233,"name": "Card 3"},
{"id": 1233,"name": "Card 4"},

]

My current get method code looks like this: 
  created() {
  axios.get("../../public/data/data.json")
  .then((response) => {
      response.data
  })

javascript vue.js

Answer 1

Answer №1

If the data is stored locally, Axios won't be able to access it using a path. Instead, you can directly import your local file like this

import data from '../your-data.json'

Axios is designed for network requests, so if your JSON file is located at /public/data.json, you can make a request using this code

const response = await axios('http://localhost:3000/public/data.json')

Answer 2

If the data is stored locally, Axios won't be able to access it using a path. Instead, you can directly import your local file like this

import data from '../your-data.json'

Axios is designed for network requests, so if your JSON file is located at /public/data.json, you can make a request using this code

const response = await axios('http://localhost:3000/public/data.json')

Answer 3

Answer №2

If you want to store your json data in the project's public static directory, simply place your json file at the following location: ~project/public/data/data.json. To make a request for this data, use the following code snippet:

axios.get("/data/data.json", {
    baseURL: "/",
  })

Answer 4

If you want to store your json data in the project's public static directory, simply place your json file at the following location: ~project/public/data/data.json. To make a request for this data, use the following code snippet:

axios.get("/data/data.json", {
    baseURL: "/",
  })

How can I utilize Axios in Vue.js to access a local JSON file?

Answer №1

Answer №2

Similar questions

Contrast between employing element selector for concealment and activation tasks

The <v-select> component in VueJS fails to bind properly during a post operation

Implementing JavaScript: Grouping JSON Response by Date and Category in a Table

The specified package, [email protected], fails to meet the peerDependencies criteria set by its sibling modules

How to Access a Method from Controller 2 in AngularJS Controller One

Trigger jQuery when a breakpoint has been met

When you click on a list of links, a stylish image gallery will appear using fancybox

Leveraging AJAX for fetching files on the identical server

Identifying the active input using React hooks

Leveraging Angular CLI in conjunction with the newest AspNetCore Angular 4 Single Page Application template

Retrieve the complete HTML content of a webpage, including the values of all input fields

Can we find a method to incorporate multicolored borders?

Physically eliminate (and obliterate) a component from keep-alive

Automatically collapse the responsive menu upon selecting a menu item

Cross-origin resource sharing policy is preventing a request from the client-side to the server

Transferring information among components in Vue.js

What causes an undefined outcome when a promise is fulfilled?

What is the best way to showcase navigation and footer on every page using AngularJS?

What is the best way to retrieve data from multi-dimensional JSON structures?

Retrieve element attributes and context inside a function invoked by an Angular directive