Vue Read Json File

Posted on  by admin

File Reader Component

Modified1 year, 8 months ago. I'm having this View.JS app where I am currently showing conversation thread from JSON.

The code currently looks like this:. Now I want to have this data on a external JSON file (Called 'data.json' in the same directory) and have the same output.

Any ideas on how I can do it??

11 gold badge66 silver badges1717 bronze badges.

1717 bronze badges. 1717 bronze badges.

there are multiple solution but as i believe you are very new to Vue JS and learning Vue i will keep things simple.

Add a file data.json.

update your Js file as. loadJSON is just a basic HHTP request and load the data from json file. inside init call back you can set data to local instant.

22 gold badges99 silver badges2323 bronze badges. 2323 bronze badges. Import your json file to your file and just loop it. 33 gold badges1818 silver badges4646 bronze badges. 4646 bronze badges. One might need to use some external static data written in a JSON file, in their application.

One simple solution is to place the JSON file inside your src directory and then import it into your js file; Using this method you can not access your JSON file and change it in the production mode; Because the JSON will be included into the bundled JS by Webpack.But sometimes what you need is a JSON file separated from your app.js, so that you can change the content anytime in future, without rebuilding the whole application.

In Vue CLI 3 document, it has been offered to place such static files in public directory, hence the file won’t be processed by Webpack and will just be copied after building the application.

But importing a JSON file from the public directory is a little bit more tricky.

Accessing the data of a JSON out of your application is basically similar to reaching out to an API and getting a response.

The only difference is, you are requesting a file placed right inside your own public directory. So the first thing we need here is an Ajax handling tool.

I will use axios in this article but feel free to use any other alternatives.

Create a .env file in the root of your project and add your own base URL to the file:.

Inside your component, create a data property to read base URL from .env :.

Import Axios into your component.
Now You can create a method for fetching your JSON data:.

You can escape step 2 and replace the this.baseUrl with a simple ‘/’, but it is recommended to use the .env file.

The last step is to call this method wherever you need, Like when the component is created:. The response of the Ajax call contains your JSON content. Sometimes we need to read data from files. In old times, you’d need to send it to a server and for it to then return the data needed.

The thing is, nowadays we can also access files directly in the browser using the FileReader API.

If we just want to read a text file in order to do something trivial with it at the UI level, we don’t need to send the file to the server.

An example could be filling a textarea from a file. The FileReader API gives a nice interface to read data in different ways using the File or Blob object types.

The FileReader instance has a readAsText method that we can use to read a file as text:.

Since the FileReader API is asynchronous, it exposes several events that we can use to get its state.
In particular, we’ll need the onload event to access the data when the file has been read:.

As you can see, the text data is accessible via e.target.result.

3. Get base URL in your component

The previous code already reads a file, but we still have to give it the file object.