My question is about reading from a local JSON file. I am creating a VueJS application. I am trying to load data from a json file into the Vue component like this,
<script>
var container = {};
var items = {};
var options = {};
var timeline = {};
export default {
mounted() {
// DOM element where the Timeline will be attached
container = document.getElementById('mynetwork');
// Configuration for the Timeline
options = {
width: '100%',
height: '200px',
showTooltips: true
};
// initialize your network!
timeline = new vis.Timeline(container, items, options);
timeline.on('select', function(properties){
console.log(properties);
var itemNo = properties.items[0];
switch(itemNo){
case 1:
window.open('./../../../generalcheckup1.html');
break;
case 2:
window.open('./../../../scan1.html');
break;
case 3:
window.open('./../../../surgery1.html');
break;
case 4:
window.open('./../../../generalcheckup2.html');
break;
case 5:
window.open('./../../../scan2.html');
break;
case 6:
window.open('./../../../generalcheckup3.html');
break;
default:
console.log('Item out of focus');
}
});
},
data(){
return{
}
},
created: function(){
$.getJSON('http://localhost:8080/#/timeline.json',function(json){
console.log('Entered inside');
this.items = new vis.DataSet([json]);
console.log(json);
});
},
methods:{
}
}
</script>I have a small JSON file, timeline.json, present in my folder which looks like this,
{
"id": 1,
"content": "General Checkup",
"start": "2017-01-20",
"title": "General check-up"
}
When I try loading the script, the control doesn't seem to be entering into the $.getJSON function. There are no errors on the console. What wrong am I doing?