VueJS - Reading data from local json file into vis.js timeline

Question

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?

Answer 1

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
        }
    }
}

Answer 2

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.

Answer 3

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 .......