Morris.js无法显示Ajax返回的数据

Question

I have the following code to show a file's downloads in the past 30 days:

All data comes from "ajax/downloads.php" by doing a simple query to my database.

    var pastDays = 30; //this value shows how many days back to show statistics
    $.ajax({
        type: "POST",
        cache: false,
        url: "ajax/downloads.php",
        dataType: "json",
        data: "days="+pastDays,
        success : function(res) {
            var obj = [];
            for(var x = 0; x <= pastDays; x++){
                var currObj = res[x];
                var objCombo = currObj.split("|");
                var objItem = "{date: '"+objCombo[0]+"', downloads: '"+objCombo[1]+"'}";
                objItem = JSON.stringify(eval("(" + objItem + ")"));
                obj.push(objItem);
            }
            console.log(obj);
}

This is the ajax response (res) that I already get:

console.log(res);
["07Apr|1", "06Apr|3", "05Apr|12", "04Apr|11", "03Apr|0", "02Apr|0", "01Apr|6", "31Mar|0", "30Mar|7", "29Mar|16", "28Mar|5", "27Mar|5", "26Mar|12", "25Mar|9", "24Mar|4", "23Mar|10", "22Mar|16", "21Mar|2", "20Mar|19", "19Mar|22", "18Mar|10", "17Mar|11", "16Mar|10", "15Mar|19", "14Mar|0", "13Mar|4", "12Mar|14", "11Mar|5", "10Mar|26", "09Mar|7", "08Mar|5"]

The console output I get after push is:

   console.log(obj); 
["{"date":"07Apr","downloads":"1"}", "{"date":"06Apr","downloads":"3"}", "{"date":"05Apr","downloads":"12"}", "{"date":"04Apr","downloads":"11"}", "{"date":"03Apr","downloads":"0"}", "{"date":"02Apr","downloads":"0"}", "{"date":"01Apr","downloads":"6"}", "{"date":"31Mar","downloads":"0"}", "{"date":"30Mar","downloads":"7"}", "{"date":"29Mar","downloads":"16"}", "{"date":"28Mar","downloads":"5"}", "{"date":"27Mar","downloads":"5"}", "{"date":"26Mar","downloads":"12"}", "{"date":"25Mar","downloads":"9"}", "{"date":"24Mar","downloads":"4"}", "{"date":"23Mar","downloads":"10"}", "{"date":"22Mar","downloads":"16"}", "{"date":"21Mar","downloads":"2"}", "{"date":"20Mar","downloads":"19"}", "{"date":"19Mar","downloads":"22"}", "{"date":"18Mar","downloads":"10"}", "{"date":"17Mar","downloads":"11"}", "{"date":"16Mar","downloads":"10"}", "{"date":"15Mar","downloads":"19"}", "{"date":"14Mar","downloads":"0"}", "{"date":"13Mar","downloads":"4"}", "{"date":"12Mar","downloads":"14"}", "{"date":"11Mar","downloads":"5"}", "{"date":"10Mar","downloads":"26"}", "{"date":"09Mar","downloads":"7"}", "{"date":"08Mar","downloads":"5"}"]

However when I feed it to Morris.bar I get "undefined" values.

Morris.js works fine though if I specify "var obj" in my code by hand and omit the ajax:

var obj = [ {"date":"07Apr","downloads":"1"}, {"date":"06Apr","downloads":"3"}, {"date":"05Apr","downloads":"12"}, {"date":"04Apr","downloads":"11"}, {"date":"03Apr","downloads":"0"}, {"date":"02Apr","downloads":"0"}, {"date":"01Apr","downloads":"6"}, {"date":"31Mar","downloads":"0"}, {"date":"30Mar","downloads":"7"}, {"date":"29Mar","downloads":"16"}, {"date":"28Mar","downloads":"5"}, {"date":"27Mar","downloads":"5"}, {"date":"26Mar","downloads":"12"}, {"date":"25Mar","downloads":"9"}, {"date":"24Mar","downloads":"4"}, {"date":"23Mar","downloads":"10"}, {"date":"22Mar","downloads":"16"}, {"date":"21Mar","downloads":"2"}, {"date":"20Mar","downloads":"19"}, {"date":"19Mar","downloads":"22"}, {"date":"18Mar","downloads":"10"}, {"date":"17Mar","downloads":"11"}, {"date":"16Mar","downloads":"10"}, {"date":"15Mar","downloads":"19"}, {"date":"14Mar","downloads":"0"}, {"date":"13Mar","downloads":"4"}, {"date":"12Mar","downloads":"14"}, {"date":"11Mar","downloads":"5"}, {"date":"10Mar","downloads":"26"}, {"date":"09Mar","downloads":"7"}, {"date":"08Mar","downloads":"5"} ];

Notice the difference between the two arrays:

From ajax I get:

["{"date":"07Apr","downloads":"1"}", "{"date":"06Apr","downloads":"3"}", ...]

While the one that works is like that:

[ {"date":"07Apr","downloads":"1"}, {"date":"06Apr","downloads":"3"}, ...]

Finally, this is how I initiate Morris:

        Morris.Bar({
          element: 'bar-requests',
          data: obj,
          xkey: ['date'],
          ykeys: ['downloads'],
          labels: ['downloads']
        });

Any ideas as to how I could feed my ajax returned data to Morris??

Answer 1

Maybe I did not express the question properly in the first place, and since I didn't get any answers, I thought to simplify it and post it as a new question (hope I did't violate any of the site rulez)... In any case, problem solved!!!

Here is the solution that worked for me: answer by Touhid Alam