VueJS - Reading data from local json file into vis.js timeline
You can simply read a static JSON file using import. Then assign in data.
import Timeline from '../data/timeline.json';
export default {
data() {
return {
Timeline
}
}
}
I believe the issue is with your URL for the Json file. Try placing the Json file in the static
folder. Create one if it does not exist. It should be same as level of src
folder. Then place Json file that folder. After doing above suggestions, use the URL as shown below:
$.getJSON('static/timeline.json', function .......
You can also dynamically load json files if you have many of them. Loading too many with import statements in your vue will bog down the browser or crash it if you have too much json. So you can load json files dynamically on an individual basis as well.
Just create a method and set a variable equal to the json resource. Trigger the method when the user needs the resource.
methods: {
getJsonFile (index) {
this.currentJsonFile = require('./assets/' + index + '.json')
}
The JSON will be parsed automatically.