web-dev-qa-db-ja.com

VueJS-ローカルjsonファイルからデータをvis.jsタイムラインに読み込む

私の質問は、ローカルの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関数に入っていないようです。コンソールにエラーはありません。私は何を間違っていますか？

javascriptjqueryhtmlvuejs2vis.js
5
CoderPJ

問題はJsonファイルのURLにあると思います。 Jsonファイルをstaticフォルダーに配置してみてください。存在しない場合は作成します。 srcフォルダーのレベルと同じでなければなりません。次に、Jsonファイルをそのフォルダーに配置します。上記の提案を行った後、以下に示すURLを使用します。

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

インポートを使用して、単純に静的JSONファイルを読み取ることができます。次に、データを割り当てます。

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

Jsonファイルが多数ある場合は、動的に読み込むこともできます。 vue=にimportステートメントを使用してあまりにも多くロードすると、jsonが多すぎるとブラウザが動かなくなるかクラッシュします。jsonファイルを個別に動的にロードすることもできます。

メソッドを作成し、jsonリソースに等しい変数を設定するだけです。ユーザーがリソースを必要とするときにメソッドをトリガーします。

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

JSONは自動的に解析されます。

2
Rob