Obtenir des paires de clés et de valeurs du Json, en utilisant JavaScript

Question

Je suis un peu bloqué sur la façon d'obtenir les clés et les valeurs du JSON donné et de l'assigner à une autre fonction javascript. L'idée est que l'utilisateur sélectionne une valeur dans la liste de sélection et que le code fasse une boucle dans Json, trouve des clés et des valeurs particulières (selon l'utilisateur choisi) et pousse ces clés et valeurs dans un autre constructeur javascript pour dessiner un graphique. Voici donc ce que je jusqu'ici ai pu faire: html liste select avec la fonction incendie jusqu'à événement onclick:

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

Et est une fonction ici qui devrait faire le reste. Cependant, quand je boucle le JSON, SEULEMENT la dernière paire assignée au constructeur de js et donc SEULEMENT une (dernière) paire est visible sur l'écran. Comment assigner TOUTES les clés et valeurs dans le constructeur? Voici mon code à ce jour:

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++; 
}} 
} 

Et voici un échantillon de 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}];} 

Quelqu'un peut-il me montrer comment obtenir toutes les clés et les valeurs et les affecter dans le constructeur? par exemple. Laisse dire que l'utilisateur sélectionne la durée dans la liste de sélection, donc le code devrait passer en boucle dans tout le json, récupérer toutes les clés et valeurs de durée et les pousser toutes dans le constructeur? Donc, dans ma compréhension, le constructeur devrait ressembler à ceci:

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

Toute aide très appréciée. Merci

Answer 1

Cela arrive parce que vous appelez gantt.groupBy à chaque itération fournissant toujours avec un seul élément:

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

ce que vous devez faire est

1. recueillir un tableau de tous les groupes
2. les passer tous en gantt.groupBy

Bien que, je ne sais pas tout à fait sous supporter ce que fait exactement votre filtre. C'est à dire. de votre échantillon:

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

et plus tard dans le code:

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

pour cet échantillon json_name.data [i] [my_element] équivaut à json_name.data [i] [ "v1 "] - et si rien ne me manque, il sera toujours indéfini car les objets de votre exemple json n'ont pas la propriété 'v1'. Est-ce que je manque quelque chose, ou quelque chose manque-t-il à votre échantillon code/json?Si vous effectuez le suivi de l'entrée utilisateur sur un contrôle de sélection, une méthode plus fiable consiste à capturer l'événement 'change' sur le noeud sélectionné plutôt que de cliquer sur chaque option, car on peut changer la valeur non seulement de la souris mais le clavier et

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

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

MISE À JOUR

Je suppose que quelque chose suivante devrait faire: 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); 
    } 
}