2016-07-04 17 views
0

Hat jemand Programmierung erstellt oder getan, um ein Menü und ein Dropdown-Menü auf der JSON-Struktur zu erstellen.So erstellen Sie ein Dropdown-Menü aus einem JSON

Hier ist meine JSON Menüstruktur unter:

Screenshot

[ 
     {"root" : "Input", 
     "subs" : [ 
        {"sub_name": "CSV Reader","type": "csv", 
        "subs_level2": [{"sub_name": "Reader 1","type": "csv"}, 
            {"sub_name": "Reader 2","type": "csv"} 
            ] 
        }, 
        {"sub_name": "DB Connect","type": "db"}, 
        {"sub_name": "Sample Data","type": "sample data"} 
        ] 
     }, 
     {"root" : "Output", 
     "subs" : [ 
        {"sub_name": "Output 1","type": "output1"}, 
        {"sub_name": "Output 2","type": "output2"}, 
        {"sub_name": "Output 3","type": "output3"} 
        ] 
     } 
    ] 

Dies ist meine erste javascript:

// setup the main div 
//<div id="canvas_dock"></div> 
//$('#canvas_dock').append("<div class='node_dropdown'> 
//<span>Input (Root)</span> 
//<div class='node_dropdown-content'> 
//<div id="">CSV Reader</div> 
//<div id="">DB Connect</div> 
//<div id="">Sample Data</div> 
//</div> 
//</div>"); 

//here is the loop 
var key = "root", idx = 0; 
for(key in nodeTypes){ 
    if(nodeTypes[idx].root != undefined && nodeTypes[idx].root == root_menu){ 
     for(var sub in nodeTypes[idx].subs){ 
     $('#node_dropdown-content').append(nodeTypes[idx].subs[sub].sub_name); 
     } 
    } 
    idx = idx + 1; 
} 
+0

SO ist kein kostenloser Kodierungsdienst. Entweder schreibe es selbst oder suche nach einem Plugin, das das macht, was du willst. – Barmar

+0

Hallo @Barmar. Ich habe meinen Code aktualisiert. Und es ist nur bis zur 2. Ebene des JSON. Ich hatte gehofft, du könntest mir einen Hinweis geben. :) Vielen Dank –

Antwort

-1

hallo überprüfen diese mit Javascript

var JSON =[ 
    { 
     "root": "Input", 
     "subs": [ 
      { 
       "sub_name": "CSV Reader", 
       "type": "csv", 
       "subs_level2": [ 
        { 
         "sub_name": "Reader 1", 
         "type": "csv" 
        }, 
        { 
         "sub_name": "Reader 2", 
         "type": "csv" 
        } 
       ] 
      }, 
      { 
       "sub_name": "DB Connect", 
       "type": "db" 
      }, 
      { 
       "sub_name": "Sample Data", 
       "type": "sample data" 
      } 
     ] 
    }, 
    { 
     "root": "Output", 
     "subs": [ 
      { 
       "sub_name": "Output 1", 
       "type": "output1" 
      }, 
      { 
       "sub_name": "Output 2", 
       "type": "output2" 
      }, 
      { 
       "sub_name": "Output 3", 
       "type": "output3" 
      } 
     ] 
    } 
] 


    var select = document.getElementById("selector"); 
    for (var i = 0; i < JSON[0].subs.length; i++) { 
     var option = document.createElement("option"); 
     option.value = i; 
     option.textContent = JSON[0].subs[i].sub_name; 
     select.appendChild(option); 
    }; 

für refrence https://plnkr.co/edit/FZNFuu1G3KAvPRvPGtqV?p=preview

Verwandte Themen