从文件加载 JSON 与作为时间线事件的变量

Posted 2023-05-07

【中文标题】从文件加载 JSON 与作为时间线事件的变量

【英文标题】：Load JSON from file vs. as variable for timeline events

【发布时间】：2016-01-10 15:11:07

【问题描述】：

我使用 SMILES timeline 将事件数据作为 JSON 从文件和变量加载。

使用主页上的示例代码从文件加载可以正常工作：

tl = Timeline.create(document.getElementById("div-timeline"), bandInfos);
     Timeline.loadJSON("js/timelinedata.json", function(json, url) 
         eventSource.loadJSON(json, url); );

这是我的文件timelinedata.json的内容：

"dateTimeFormat": "iso8601",
"events" : [
        "start": "1924",
        "title": "Barfusserkirche",
        "description": "by Lyonel Feininger, American/German Painter, 1871-1956",
        "image": "link to an image",
        "link": "link to an article"
        
]

但是，当我将 JSON 粘贴到 var 中并尝试加载它时，我会收到抱怨。

这就是我填充我的变量的方式：

function TimeTestData1()
    var TimelineEvent =  "dateTimeFormat": "iso8601",
    "events" : [
            "start": "1924",
            "title": "Barfusserkirche",
            "description": "by Lyonel Feininger, American/German Painter, 1871-1956",
            "image": "link to an image",
           "link": "link to an article"
            
    ];
    return TimelineEvent;
  

并在时间轴中使用它：

var tdata = TimeTestData1();
console.dir(tdata); // this looks fine
// [ timeline code ]
Timeline.loadJSON(tdata, function(json, url)  eventSource.loadJSON(json, url); );

我收到一个带有消息的“警报”弹出窗口：

Failed to load json data from [object Object] Not Found

当我像这样使用JSON.stringify(tdata) 时：

Timeline.loadJSON(JSON.stringify(tdata), function(json, url) 
    eventSource.loadJSON(json, url); );

浏览器告诉我（使用警报弹出窗口）：

无法从 "dateTimeFormat":"iso8601","events":["start":1924,"title":"Barfusserkirche","description":"by Lyonel Feininger 加载 json 数据，美国/德国画家，1871-1956","image":"图片链接","link":"文章链接"] 未找到

这里是时间轴函数的完整代码：

function LoadTimeline() 
    var tl;
    var eventSource = new Timeline.DefaultEventSource(0);
    //var tdata = TimeTestData1();
    var theme = Timeline.ClassicTheme.create();
    theme.timeline_start = new Date(Date.UTC(1890, 0, 1));
    theme.timeline_stop  = new Date(Date.UTC(2020, 0, 1));
    var d = Timeline.DateTime.parseGregorianDateTime("1950") // set date to display
    var bandInfos = [
        Timeline.createBandInfo(
            width:          "70%",
            intervalUnit:   Timeline.DateTime.YEAR,
            intervalPixels: 100,
        eventSource:    eventSource,
                date:           d
        ),
        Timeline.createBandInfo(
            width:          "30%", 
            intervalUnit:   Timeline.DateTime.CENTURY,
        eventSource:    eventSource,
            date:           d,
            intervalPixels: 200
        )
    ];
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    tl = Timeline.create(document.getElementById("div-timeline"), bandInfos);
    Timeline.loadJSON("js/timelinedata.json", function(json, url) 
        eventSource.loadJSON(json, url); );
     //JSON.stringify(tdata) or tdata or  "js/timelinedata.json"

我如何传递我的事件 json var 以便时间线吃掉它？

【参考方案1】：

Timeline.loadJSON 需要一个 URL，而不是 JSON。尝试完全删除该呼叫，而只呼叫eventSource.loadJSON(tdata, url);。 （不确定在这种情况下 url 参数的用途，文档对于这个项目看起来真的很糟糕）

【讨论】：

使用eventSource.loadJSON(JSON.stringify(tdata), document.location.href); 我没有收到任何错误，这是the mailinglist 中的解决方案，但我仍然可以看到我的活动。也许这条线是对的，而错误在其他地方？

可能您的数据格式不正确？尝试使用官方示例数据。

【参考方案2】：

不确定是否有人会看到这一点，但 loadJSON() 期望 JSON 对象作为第一个参数，而不是字符串（这就是你通过说 JSON.stringify() 所做的）。所以只要 tdata 是兼容 Timeline 的 JSON 对象，那么你只需要

eventSource.loadJSON(tdata, window.location.href)