填充功能的陣列通過JSON

我使用這個時間表插件作爲我自己的一個基地：http://www.jqueryscript.net/other/Create-A-Simple-Vertical-Timeline-with-jQuery-CSS.html 填充功能的陣列通過JSON

我試圖改變的代碼是步驟3中創建使用Javascript數組對象的時間軸事件。

我的代碼：（注意：#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變量有些愚蠢。任何提示將非常感謝！

來源

2014-06-12 pork-chop

你最大的問題是你正在創建一個字符串數組，但是這個插件需要一個對象數組（不是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可用於準確創建表示日期的東西。

來源

2014-06-13 01:03:48 JAAulde

+1很好解釋@JAAulde;我承認並不清楚插件是什麼作爲輸入的;你的解決方案似乎更準確。 – Stevangelista

不幸的是，插件並沒有看起來是所有有據可查的（順便說一句，考慮this one吧？），但僅基於文章&您的樣品，這個問題很可能在你的dataInfo你懷疑。

實際上您並沒有爲date屬性的值提供有效的Date對象;我的猜測是，它應該是這樣的：

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

編輯：仰望JAAulde的答案正確的方法來做到這一點。

來源

2014-06-12 23:37:26 Stevangelista

將「Date」實例連接到一個字符串將在結果轉換期間隱式調用'toString'。 OP正在建立一個字符串是真正的問題。 – JAAulde

我讚賞備用時間線建議 - 將檢查它肯定！ –

填充功能的陣列通過JSON

回答

相關問題