web-dev-qa-db-fra.com

VueJS - Lecture des données d'un fichier json local dans la timeline de vis.js

Ma question concerne la lecture d'un fichier JSON local. Je crée une application VueJS. J'essaie de charger des données d'un fichier JSON dans le composant Vue comme ceci,

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

J'ai un petit fichier JSON, timeline.json, présent dans mon dossier qui ressemble à ceci,

{
  "id": 1,
  "content": "General Checkup",
  "start": "2017-01-20",
  "title": "General check-up"
}

Lorsque j'essaie de charger le script, le contrôle ne semble pas entrer dans la fonction $.getJSON. Il n'y a pas d'erreur sur la console. Qu'est-ce que je fais de mal?

javascriptjqueryhtmlvuejs2vis.js
5
CoderPJ

Je crois que le problème est avec votre URL pour le fichier Json. Essayez de placer le fichier Json dans le dossier static. Créez-en un s'il n'existe pas. Il devrait être identique au niveau du dossier src. Placez ensuite le fichier Json dans ce dossier. Après avoir fait les suggestions ci-dessus, utilisez l'URL comme indiqué ci-dessous:

$.getJSON('static/timeline.json', function .......
3
Pradeepb

Vous pouvez simplement lire un fichier JSON statique à l'aide de l'importation. Puis assignez dans les données.

import Timeline from '../data/timeline.json';
export default{
    data(){
        return {
            Timeline
            }
    },
20
Jakarea Parvez

Vous pouvez également charger dynamiquement des fichiers JSON si vous en avez plusieurs. Charger trop de déclarations d'import dans votre vue enlèvera le navigateur ou le plantera si vous avez trop de JSON. Ainsi, vous pouvez également charger des fichiers JSON dynamiquement sur une base individuelle. 

Créez simplement une méthode et définissez une variable égale à la ressource JSON. Déclenchez la méthode lorsque l'utilisateur a besoin de la ressource.

methods: {
  getJsonFile (index) {
  this.currentJsonFile = require('./assets/' + index + '.json')
}

Le JSON sera analysé automatiquement.

2
Rob