VueJS - 从本地 json 文件中读取数据到 vis.js 时间轴

Posted 2023-02-23

【中文标题】VueJS - 从本地 json 文件中读取数据到 vis.js 时间轴

【英文标题】：VueJS - Reading data from local json file into vis.js timeline

【发布时间】：2018-01-07 14:09:53

【问题描述】：

我的问题是关于从本地 JSON 文件中读取。我正在创建一个 VueJS 应用程序。我正在尝试像这样将 json 文件中的数据加载到 Vue 组件中，

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

我的文件夹中有一个小的 JSON 文件，timeline.json，看起来像这样，

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

当我尝试加载脚本时，控件似乎没有进入$.getJSON 函数。控制台上没有错误。我做错了什么？

【问题讨论】：

应该是getJSON还是get？

@Pradeepb 它应该是 getJSON，因为它是一个 jQuery 方法

好的，感谢您的澄清。我问是因为我看到类似this 和this

@Pradeepb 我基本上想从本地文件夹加载timeline.json文件

你的json文件在什么位置？问题在于您提供的用于检索 JSON 文件的 URL。

【参考方案1】：

您可以使用导入简单地读取静态 JSON 文件。然后在数据中赋值。

import Timeline from '../data/timeline.json';
export default 
    data() 
        return 
            Timeline
        
    

【参考方案2】：

如果您有很多 json 文件，您也可以动态加载它们。如果你有太多的 json，在你的 vue 中加载太多的 import 语句会使浏览器陷入困境或崩溃。因此，您也可以单独动态加载 json 文件。

只需创建一个方法并设置一个等于 json 资源的变量。当用户需要资源时触发该方法。

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

JSON 将被自动解析。

【参考方案3】：

我认为问题在于 Json 文件的 URL。尝试将 Json 文件放在 static 文件夹中。如果不存在，则创建一个。它应该与src 文件夹的级别相同。然后将 Json 文件放在该文件夹中。完成以上建议后，使用如下所示的 URL：

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