Question

我对如何从给定的Json获取键和值并将其分配给另一个javascript函数有点困惑。这个想法是用户从选择列表中选择一个值，代码应循环遍历Json，找到特定的键和值（基于用户选择的内容）并将此键和值推送到另一个javascript构造函数中以绘制图表。到目前为止，我能够做到：html选择列表，具有启动功能onclick事件：

<select id="abc">
 <option value="v1" onclick="my_function()">V1</option>
</select>

这是一个应该完成其余工作的功能。但是，当我遍历Json时，只有最后一对分配给js构造函数，因此在屏幕上只能看到一对（最后一对）。如何将所有键和值分配给构造函数？到目前为止，这是我的代码：

function my_function(){
var my_element = document.getElementById("abc").value;  // get the select list value                                                            
var arr=[''];                                                                                                               
var j=0;
for (var i = 0; i < json_name.data.length; i++) {       // start the  loop
 if($.inArray(json_name.data[i][my_element],arr)<0){                                                                                
  arr[j]=json_name.data[i][my_element];                

 gantt.groupBy({                                       // here is constructor starts
 relation_property: my_element,                                                 
groups:   [{                                                                                
    key: arr[j], label: arr[j] }],                                                                              
    group_id: "key",
    group_text: "label"
});
  j++; 
}}
}

以下是Json的一个样本：

var json_name = {
        "data":[
            {"id":11, "text":"Project #1", "start_date":"", "duration":"", "progress": 0.6, "open": true},
            {"id":12, "text":"Task #1", "start_date":"03-04-2013", "duration":"5", "parent":"11", "progress": 1, "open": true},
            {"id":13, "text":"Task #2", "start_date":"", "duration":"", "parent":"11", "progress": 0.5, "open": true},
            {"id":14, "text":"Task #3", "start_date":"02-04-2013", "duration":"6", "parent":"11", "progress": 0.8, "open": true},
            {"id":15, "text":"Task #4", "start_date":"", "duration":"", "parent":"11", "progress": 0.2, "open": true},
            {"id":16, "text":"Task #5", "start_date":"02-04-2013", "duration":"7", "parent":"11", "progress": 0, "open": true},
            {"id":17, "text":"Task #2.1", "start_date":"03-04-2013", "duration":"2", "parent":"13", "progress": 1, "open": true}];}

有人能指出我如何获取所有键和值并在构造函数中分配它们吗？例如让我们说用户从选择列表中选择持续时间，所以代码应循环遍历整个json，获取所有持续时间键和值并将它们全部推送到构造函数中？所以在我的理解中，构造函数应该如下所示：

gantt.groupBy({
relation_property: my_element,                                                                      
groups: [{
    key:1, label:1},{                                 // where key and a label equals to first matched key and value in json                                                        
    key:2, label: 2},{   
 ......                                               // second matched etc etc
    key:7, label: 7} ],                               // last matched key and value ..
group_id: "key",
group_text: "label"
});

任何帮助非常感谢。感谢

Answer 1

之所以发生这种情况，是因为你在每次迭代时调用gantt.groupBy，总是只为它提供一个项目：

gantt.groupBy({  // here is constructor starts
 relation_property: my_element,                                                 
groups:   [{                                                                                
    key: arr[j], label: arr[j] }],       // only one item in groups array                                                                       
    group_id: "key",
    group_text: "label"
});

你需要做的是

收集所有群组的数组
将它们全部传递给gantt.groupBy

虽然，我不太明白你的过滤器到底是做什么的。即来自您的样本：

var my_element = document.getElementById("abc").value; // my_element = "v1" for a given sample

以后的代码：

if($.inArray(json_name.data[i][my_element],arr)<0){

此示例 json_name.data [i] [my_element] 相当于 json_name.data [i] [“v1”] - 如果我不是由于样本json中的对象没有'v1'属性，所以它总是未定义。

我是否遗漏了某些内容，或者您的代码/ json示例中缺少某些内容？

<select id="abc" onchange="my_function()">

https://developer.mozilla.org/en-US/docs/Web/Events/change

<强>更新

我想以下事情应该做： HTML：

<select onchange="groupByProperty(this.value)">
    <option value="" selected>none</option>
    <option value="duration">duration</option>
    <option value="progress">progress</option>
</select>

JS：

//get array of groups that can be provided to gantt.groupBy from array of tasks and property name
function groupsFromProperty(tasks, propertyName){

    // get unique values of the property
    var groupKeys = tasks.reduce( function(hash, currentItem) {
        hash[currentItem[propertyName]] = true;
        return hash;
    }, {});

    // form an array of {key:,label:} objects from unique values
    var groups = [];
    for(var i in groupKeys){
        groups.push({key: i, label:i});
    }

    return groups;
}

function groupByProperty(propertyName){
    if(propertyName){
        gantt.groupBy({
            groups: groupsFromProperty(gantt.getTaskByTime(), propertyName),
            relation_property: propertyName,
            group_id: "key",
            group_text: "label"
        });
    }else{
        gantt.groupBy(false);
    }
}

使用JavaScript

1 个答案: