Populating function's array via JSON - ajax

Question

I am using this timeline plug-in as a base for my own: http://www.jqueryscript.net/other/Create-A-Simple-Vertical-Timeline-with-jQuery-CSS.html
The code I'm trying to change is step 3. Create events for the timeline using Javascript array object.
My code:
(note that #events is my timeline container for all the data)
$(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
});
However, this is causing an error in the function that generates the timeline:
TypeError: firstDate is undefined
var tempDate = new Date(firstDate.getTime());
I'm thinking that perhaps something goofy is going on with my dataInfo variable. Any tips would be greatly appreciated!

Answer 1

Your biggest issue is that you're creating an array of strings, but the plugin expects an array of objects (not JSON, but an actual array of objects).
$(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
});
});
Again, even if the plugin did want JSON (which is a string) as opposed to an array of objects, you weren't providing it with that either--you were proving an array of strings, each of which were an attempt at JSON serializing some data.
Also, if you ever do need to produce JSON, don't do it manually with string concatenation. Create an actual data structure, then JSON.stringify() it.
Finally, you need to ensure that your shortdate property on the returned data is something which Date can use to accurately create the represented date.

Answer 2

Unfortunately the plug-in doesn't look to be all that well documented (as an aside, consider this one perhaps?) but based on just the article & your sample, the issue is likely in your dataInfo as you suspect.
You're not actually providing a valid Date object for the value of the date property; my guess is it should be this:
numDate = new Date(event.shortdate);
...
dataInfo = '{ date:' + numDate + ', type: "' + eventType + '", title: "' + txtTitle + '", description: "' + eventDesc + '" }';
EDIT: Look to JAAulde's answer for the correct way to do this.