2014-06-12 9 views
0

를 통해 내 자신의 기반으로이 타임 라인 플러그인을 사용하고 있습니다 : http://www.jqueryscript.net/other/Create-A-Simple-Vertical-Timeline-with-jQuery-CSS.html채우기 기능의 배열은 JSON

내가 변화하기 위해 노력하고있어 코드는 3 단계는 자바 스크립트 배열 객체를 사용하여 타임 라인에 대한 이벤트를 생성합니다.

내 코드 : 은 (#events 내 타임 라인의 용기는 모든 데이터에 대한이므로주의)

$(function() {   

    $.ajax({ 
    url: url, 
    type: 'get', 
    dataType: 'json', 
    async: false, 
    success: function(data) { 

     for (i = 0; i < data.timeline.length; i++) { 
      event = data.timeline[i]; 

      numDate = event.shortdate; 
      txtTitle = event.longdate; 
      eventType = event.category; 
      eventDesc = event.description; 

      dataInfo = '{ date: new Date(' + numDate + '), type: "' + eventType + '", title: "' + txtTitle + '", description: "' + eventDesc + '" }'; 

      dataArray.push(dataInfo); 

     } 

    } 
    }); 

    $('#events').timeline({ 
    data: dataArray, 
    height: 800 // in pixel 
    }); 

그러나,이 타임 라인 생성하는 기능에 오류의 원인이되는 :

TypeError: firstDate is undefined

var tempDate = new Date(firstDate.getTime());

을 나는 어리석은 뭔가가 나의 dataInfo 변수로 계속되고 있다고 생각하고있다. 모든 팁 크게 감사하겠습니다! 당신은 의심으로

답변

2

가장 큰 문제는 문자열 배열을 만드는 것이지만 플러그인은 객체 배열 (JSON이 아니라 객체의 실제 배열)을 필요로한다는 것입니다. 문자열, 각각의 당신이 증명 된 배열 -

$(function() { 
    var dataArray = []; 

    $.ajax({ 
     url: url, 
     type: 'get', 
     dataType: 'json', 
     async: false, 
     success: function (data) { 
      for (i = 0; i < data.timeline.length; i++) { 
       event = data.timeline[i]; 

       dataArray.push({ 
        date: new Date(event.shortdate), 
        type: event.category, 
        title: event.longdate, 
        description: event.description 
       }); 
      } 
     } 
    }); 

    $('#events').timeline({ 
     data: dataArray, 
     height: 800 // in pixel 
    }); 
}); 

다시, 플러그인 객체의 배열에 반대 (문자열 인) JSON을 원하지 않은 경우에도, 그 중 하나와 함께 제공되지 않은 그 중 일부는 JSON에서 일부 데이터를 직렬화하려는 시도였다.

또한 JSON을 생성해야하는 경우 수동으로 문자열 연결을 사용하지 마십시오. 실제 데이터 구조를 만든 다음 JSON.stringify()을 만듭니다.

마지막으로 반환 된 데이터의 shortdate 속성이 Date이 나타내는 날짜를 정확하게 만들 수 있는지 확인해야합니다.

+1

+1 잘 설명 된 @JAAulde; 필자는 플러그 - 인이 입력으로 기대하는 것이 무엇인지 명확하게 알지 못했습니다. 당신의 솔루션은 분명 더 정확 해 보입니다. – Stevangelista

1

불행하게도 플러그인이 (? 아마도 this one을 고려, 여담으로)하지만, 단지 기사 & 샘플을 기반으로 모든 것을 잘 설명 할 보이지 않는, 문제는 dataInfo에 가능성이있다.

실제로 date 속성 값에 유효한 Date 개체를 제공하지 않습니다. 내 생각 엔이되어야합니다 :

numDate = new Date(event.shortdate); 
... 
dataInfo = '{ date:' + numDate + ', type: "' + eventType + '", title: "' + txtTitle + '", description: "' + eventDesc + '" }'; 

EDIT :이 올바른 방법에 대한 JAAulde 응답을보십시오.

+0

'Date' 인스턴스를 문자열에 연결하면 결과로 나오는 캐스트 중에 암시 적으로'toString'을 호출합니다. OP가 문자열을 만드는 것은 진짜 문제입니다. – JAAulde

+0

대체 타임 라인 제안에 감사드립니다 - 확실히 확인해보십시오! –