Javascript VueJS - 从本地 json 文件读取数据到 vis.js 时间线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45425448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS - Reading data from local json file into vis.js timeline
提问by CoderPJ
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,
我的问题是关于读取本地 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>I have a small JSON file, timeline.json, present in my folder which looks like this,
我的文件夹中有一个小的 JSON 文件，timeline.json，如下所示，
{
"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 $.getJSONfunction. There are no errors on the console. What wrong am I doing?
当我尝试加载脚本时，控件似乎没有进入$.getJSON函数。控制台上没有错误。我做错了什么？
采纳答案by Pradeepb
I believe the issue is with your URL for the Json file. Try placing the Json file in the staticfolder. Create one if it does not exist. It should be same as level of srcfolder. Then place Json file that folder. After doing above suggestions, use the URL as shown below:
我相信问题在于您的 Json 文件的 URL。尝试将 Json 文件放在static文件夹中。如果它不存在，则创建一个。它应该与src文件夹的级别相同。然后将 Json 文件放在该文件夹中。完成上述建议后，使用如下所示的 URL：
$.getJSON('static/timeline.json', function .......
回答by Jakarea Parvez
You can simply read a static JSON file using import. Then assign in data.
您可以使用导入简单地读取静态 JSON 文件。然后在数据中赋值。
import Timeline from '../data/timeline.json';
export default{
data(){
return {
Timeline
}
},
回答by Rob
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.
如果你有很多 json 文件，你也可以动态加载它们。如果你有太多的 json，在你的 vue 中加载太多的 import 语句会使浏览器陷入困境或崩溃。因此，您也可以单独动态加载 json 文件。
Just create a method and set a variable equal to the json resource. Trigger the method when the user needs the resource.
只需创建一个方法并设置一个等于 json 资源的变量即可。当用户需要资源时触发该方法。
methods: {
getJsonFile (index) {
this.currentJsonFile = require('./assets/' + index + '.json')
}
The JSON will be parsed automatically.
JSON 将被自动解析。
