Загрузка динамически созданного JSON в TimelineJS

#jquery #json #dynamic #timeline.js

#jquery #json #динамический #timeline.js

Вопрос:

Я пытаюсь загрузить динамически созданный объект JSON в TimelineJS и не могу выяснить, что не так со следующим кодом. Всякий раз, когда я выводю объект на консоль, я получаю правильный файл JSON. Копирование его с консоли, а затем загрузка в TimelineJS работает, но всякий раз, когда я пытаюсь загрузить его прямо в TimelineJS, это не работает. Смотрите JSFiddle здесь: http://jsfiddle.net/xited/Y5hBk/6 /

HTML-код:

 <div id="my-timeline"></div>
<button id='myBtn'>start</button>

JS-код:

 $('#myBtn').click(function() {
     makeJson();
});


function loadData(json){
        createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     json,
        embed_id:   'my-timeline'
    });
}

function makeJson(){
    //create timeline json object
    var jsonObj = function(timeline){
        this.timeline=timeline;
    }

    var timelineObj = function (headline, type, text, date, era)
    {
        this.headline=headline;
        this.type=type;
        this.text=text;
        this.date=date;
        this.era=era;
    }

    var dates= new Array();

    var dateObj =  function(startDate, endDate, headline, text, tag)
            {
                this.startDate=startDate;
                this.endDate=endDate;
                this.headline=headline;
                this.text=text;
                this.tag=tag;
            }

    var eras = new Array();

    var eraObj= function(startDate, endDate, headline, text, tag)
    {
            this.startDate=startDate;
            this.endDate=endDate;
            this.headline=headline;
            this.text=text;
            this.tag=tag;
        }

    var data = [['Animal','Food','Qty','Begin Date','End Date'],
                ['deer','grass','430','1/1/2014','1/5/2014'],
                ['cat','fish','20','2/1/2014','7/5/2014'],
                ['eagle','mice','100','3/1/2014','9/1/2014']];

    //get position of an element from the data array
    var pos = function (el){
        var colHeaders = data[0]; // reading header row
        return colHeaders.indexOf(el) //return position of el
    }

    for (var i=1; i<data.length; i  ){
        beginDate=data[i][pos('Begin Date')];
        endDate=data[i][pos('End Date')];
        headline=data[i][pos('Animal')];
        text=data[i][pos('Food')];
        tag=data[i][pos('Qty')];
        var projectDate = new dateObj(beginDate,endDate,headline,text,tag);
        dates.push(projectDate);
    }

    var swEra = new eraObj('2000','2020','era headline','era text','era tag');
    eras.push(swEra);

    //build json obj
    var swTimeline = new timelineObj(
        'A New Timeline',
        'default',
        '<p>This is a paragraph.</p>',
        dates,
        eras);


    var jsonTimeline = new jsonObj(swTimeline);

    //stringifying the json object
    jsonTimeline = JSON.stringify(jsonTimeline);
    console.log(jsonTimeline);

    loadData(jsonTimeline);
}

1. какую ошибку вы получаете?

2. TimelineJS сообщает, что «ИСТОЧНИК ДАННЫХ НЕ ПРЕДОСТАВЛЕН»

3. jsonTimeline = getJSON(jsonTimeline); или источник:getJSON (json), попробуйте эту строку

4. Я выполнил $.getJSON(jsonTimeline) и $.getJSON(jsonFile) и получил: net::ERR_FILE_NOT_FOUND и неперехваченную ошибку типа: не удается прочитать свойство ‘type’ неопределенного

Ответ №1:

function loadData(jsonTimeline){} используйте вместо использования function loadData(json){} .

Живая демонстрация

1. Я согласен — загрузка уже существующего json в timeline работает. Это то, о чем я упоминал в своем посте, и это то, что вы мне показываете. Что я пытаюсь сделать, так это загрузить динамически созданный json на временную шкалу. Вот с чем мне нужна помощь.

Ответ №2:

Похоже, TimelineJS не нравятся динамически созданные файлы JSON. Временным решением является запись JSON-файла на страницу с использованием следующей функции:

 function addCode(code){
    var JS= document.createElement('script');
    JS.text= code;
    document.body.appendChild(JS);
}

Затем загрузите его в TimelineJS, и новая временная шкала будет отображаться правильно.

Смотрите следующий jsfiddle: http://jsfiddle.net/xited/Y5hBk/10 /