Question

我使用此时间轴插件作为我自己的基础：http://www.jqueryscript.net/other/Create-A-Simple-Vertical-Timeline-with-jQuery-CSS.html

我想要更改的代码是第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未定义

var tempDate = new Date（firstDate.getTime（））;

我在想我的dataInfo变量可能会发生一些愚蠢的事情。任何提示将不胜感激！

Answer 1

你最大的问题是你正在创建一个字符串数组，但插件需要一个对象数组（不是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可用于准确创建所表示日期的内容。

Answer 2

不幸的是，插件看起来并没有完全记录下来（另外，考虑this one或许？）但仅基于文章＆amp;您的样本，问题可能出在您怀疑的dataInfo。

您实际上并未为date属性的值提供有效的Date对象;我的猜测应该是这样的：

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

编辑：请查看JAAulde的答案，了解正确的方法。

通过JSON填充函数的数组

2 个答案: