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

results不是一个数组（缺少[]）也许这就是问题？

var results = [{
"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"}
];

var data = {
        labels: []
    };   


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

alert(data.labels.length);

否则，我认为这应该有用吗？

另请注意，您首先定义data，然后再重新定义它。（但这可能是故意的例子吗？）

请注意，如果您知道其名称，则可以使用.range直接访问媒体资源（而不是["range"]）

Answer 2

我不确定我是否按照你的提问。这是一些评论代码：

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);

小提琴：http://jsfiddle.net/2xP56/

动态构建javascript对象

2 个答案: