Javascript 使用jquery或JSON中的angularJS选项创建多个选择
我需要帮助。我想根据我从RESTAPI获得的数据,使用选项动态创建选择。数据是一个JSONObject。如何将这些选择动态地注入到html中。以下是一个例子: 我从REST API获得的JSON: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
{
"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);
});
}
});