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?

Symptomatology

It should be getJSON or just get? – Cirri

@Cirri it should be getJSON, as it is a jQuery method – Symptomatology

ok Thanks for clarification. I asked because I saw something like this and this – Cirri

@Cirri I basically want to load the timeline.json file from my local folder – Symptomatology

what is the location of yous json file? Issue is with the URL you provided to retrieve the JSON file. – Cirri

Place it in static folder and do $.getJSON('static/timeline.json'. It should work fine. – Cirri

@Cirri It is present in the outermost directory, i.e, It is present at the same level the src, package.json are present at. url = './../../#/timeline.json'; – Symptomatology

Let us continue this discussion in chat. – Symptomatology

Answer 1

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

Cirri

Answer 2

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

Engedus

Answer 3

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.

Enwomb