javascript - 如何从 JSON 创建下拉菜单

Question

是否有人创建或完成了编程以创建基于 JSON 结构的菜单和下拉菜单。

下面是我的 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"}
                  ]
        }
     ]

这是我最初的 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;
}

Answer 1

您好，请使用 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);
    };

引用https://plnkr.co/edit/FZNFuu1G3KAvPRvPGtqV?p=preview