javascript - 动态构造javascript对象

Question

我正在尝试使用从 api(关键跟踪器)获取的数据动态填充 javascript 对象。

我有一个名为“results”的 javascript 对象，如下所示:

   [ {"state"=>"finished",
  "range"=>"6 months",
  "points"=>0,
  "numberStories"=>0,
  "points / story"=>"N/A"},
 {"state"=>"finished",
  "range"=>"9 months",
  "points"=>0,
  "numberStories"=>0,
  "points / story"=>"N/A"},
 {"state"=>"finished",
  "range"=>"12 months",
  "points"=>0,
  "numberStories"=>0,
  "points / story"=>"N/A"}]

我正在尝试编写将动态填充 chartjs 对象的 javascript，以便我为每个“状态”绘制一条线，显示每个“范围”的“点”数。

chartjs 对象(带有虚拟数据)如下所示:

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}

到目前为止我尝试过的是:

var data ={};   
var data["labels"] = [];

for (var i = 0 ; i < results.length ; i++) {
    data["labels"].push(results[i]["range"]);
}

很明显我没有正确初始化数据中的数组，但我不太清楚应该如何完成。当我到达那里时，这同样适用于数据集......任何指针？谢谢!

Answer 1

我不确定我是否听懂了您的问题。这是一些注释代码:

var set = [
    {...},
    {...},
    {...}];

// Initialize data object
var data = { labels:[], datasets:[] };

// Get the distinct list of labels (range).
// * Done in a separate step to get a known count
// * of labels for initializing the datasets
data.labels = set.reduce(function(memo,el){
    if (memo.indexOf(el.range) === -1)
        memo.push(el.range);

    return memo;
},[]);

// Get a distinct list of datasets (states)
var _sets = set.reduce(function(memo,el){
    if (memo.indexOf(el.state) === -1){
        memo.push(el.state);

        // create a dataset record at the same index as 
        // the matching state. 
        // Initiatize the data collection for each label
        data.datasets.push({
            data:data.labels.map(function(){ return 0 }),
            name:el.state,
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff"
        });

    }
    return memo;
},[]);

// Go through the set and assign points to the 
// appropriate data bucket
set.map(function(el){
    var setIdx = _sets.indexOf(el.state);
    var labelIdx = data.labels.indexOf(el.range);

    data.datasets[setIdx].data[labelIdx] += el.points;
},[]);

console.log(data);

还有一把 fiddle :http://jsfiddle.net/2xP56/