동적으로 생성 된 JSON을 TimelineJS에로드하는 중

동적으로 생성 된 JSON 객체를 TimelineJS에로드하려고하는데 다음 코드에서 잘못된 점을 찾을 수 없습니다. 콘솔에 객체를 출력 할 때마다 올바른 JSON 파일을 얻습니다. 콘솔에서 복사 한 다음 TimelineJS에로드하면 작동하지만, TimelineJS로 곧바로로드하려고하면 작동하지 않습니다. 여기 JSFiddle를 참조하십시오 : http://jsfiddle.net/xited/Y5hBk/6/동적으로 생성 된 JSON을 TimelineJS에로드하는 중

HTML 코드 :

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

JS 코드 : function loadData(json){}를 사용

$('#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); 
}

출처

2014-07-07 xited

무엇이 오류입니까? – Sweetz

TimelineJS에서 "NO DATA SOURCE PROVIDED"라고 말합니다. – xited

jsonTimeline = getJSON (jsonTimeline); 또는 소스 :해서 getJSON (JSON),이 라인 – Sweetz

이 TimelineJS가 동적으로 생성 된 JSON 파일을 좋아하지 않는 것 같다. 임시 솔루션은 다음과 같은 기능을 사용하여 페이지에 JSON 파일을 작성하는 것입니다 :

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

그런 다음 TimelineJS에로드하고 새로운 타임 라인이 제대로 표시됩니다.

다음을 참조하십시오 : http://jsfiddle.net/xited/Y5hBk/10/

출처

2014-07-11 14:03:37 xited

function loadData(jsonTimeline){} 사용 onstead을.

Live Demo

출처

2014-07-07 04:01:19 hari

I의 특성 '유형을'읽을 수 없습니다를 동의 - 이미 존재하는 json을 타임 라인에로드하면됩니다. 그게 내가 내 게시물에서 언급 한 것이고, 당신이 나를 보여주고있는 것입니다. 내가 뭘 하려는지 동적으로 만든 json을 타임 라인에로드하는 것입니다. 그것이 내가 도움이 필요한 것입니다. – xited

동적으로 생성 된 JSON을 TimelineJS에로드하는 중

답변

관련 문제