Javascript 使用jquery或JSON中的angularJS选项创建多个选择

Javascript 使用jquery或JSON中的angularJS选项创建多个选择,javascript,jquery,html,json,angularjs,Javascript,Jquery,Html,Json,Angularjs,我需要帮助。我想根据我从RESTAPI获得的数据,使用选项动态创建选择。数据是一个JSONObject。如何将这些选择动态地注入到html中。以下是一个例子: 我从REST API获得的JSON: { "Projects":[ "Project A", "Project B", "Project C" ], "Variant":[ "Variant A", "Varian

我需要帮助。我想根据我从RESTAPI获得的数据,使用选项动态创建选择。数据是一个JSONObject。如何将这些选择动态地注入到html中。以下是一个例子:

我从REST API获得的JSON:

{
  "Projects":[
          "Project A",
          "Project B",
          "Project C"
         ],
  "Variant":[
          "Variant A",
          "Variant B"
          ],
  "Information":[
            "Info 1",
            "Info 2"
            ],
  "Links":[
        "Link 1",
        "Link 2"]
}
这是我的模板:

<div class="ui-field-contain" id="project-names">

</div>
现在我想使用jquery或angularjs生成selects项目、变量、信息和链接,以及它们的选项

应该是这样的:

<div class="ui-field-contain" id="project-names">
  <label for="project">Project:</label> 
  <select name="project" id="project" data-native-menu="false">
    <option value="Project A">Project A</option>
    <option value="Project B">Project B</option>
    <option value="Project C">Project C</option>
  </select> 
  <label for="variant">Variant:</label> 
  <select name="variant" id="variant" data-native-menu="false">
    <option value="Variant A">Variant A</option>
    <option value="Variant B">Variant B</option>
  </select>
  <label for="Information">Information:</label> 
  <select name="Information" id="Information" data-native-menu="false">
    <option value="Info A">Info A</option>
    <option value="Info B">Info B</option>
  </select> 
  <label for="select-1">Link:</label> 
  <select name="Link"   id="Link" data-native-menu="false">
    <option value="Link A">Link A</option>
    <option value="Link B">Link B</option>
  </select>
</div>
这可能吗

谢谢

到目前为止编辑我的代码: var$HTMLPROJECTNAME=$project NAME; $btnGetProjects。单击,函数{

    $.ajax({
        type : 'GET',
        url: '/RestFulApi/api/v1/mcd/get-projects',
        datatype : "json",
        success : function(data) {
            $.each(data, function(prefix, project) {

                $htmlProjectNames.append(
                        '<label for' + perfix +'>' + prefix +'</label>\n'+
                        '<select name="'+prefix+ 'id="' + prefix +'"' + 'data-native-menu="false">'


                );

            });
        }
    });

});
尝试:


你会拉小提琴吗?
$.ajax({
        type : 'GET',
        url: '/RestFulApi/api/v1/mcd/get-projects',
        datatype : "json",
        success : function(data) {
            $.each(data, function (key, values) {
                var template = '<label for="' + key.toLowerCase() + '">' + key + ':</label>' +
                            '<select name="' + key.toLowerCase() + '" id="' + key + '" data-native-menu="false">';
                for(var i=0; i<values.length; i++){
                    template = template + '<option value="' + values[i] + '">' + values[i] + '</option>';
                }
                template = template + '</select>';
                $("div#project-names").append(template);
            });
        }
    });