JSON数据选择列表：只有特定的键

这是返回的JSON数据：JSON数据选择列表：只有特定的键

[{"ENERGYUSE":"","EMISSIONFACTOR":2.332,"NAME":"Coal","ID":812,"UNITOFMEASURE":"Metric tons"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Diesel","ID":816,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":26635048.359808,"EMISSIONFACTOR":0.0005703,"NAME":"Electricity","ID":811,"UNITOFMEASURE":"KWH"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Fuel Oil","ID":814,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002328,"NAME":"Gasoline","ID":815,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002603,"NAME":"Jet Fuel","ID":818,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.00269,"NAME":"Kerosene","ID":817,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.001509,"NAME":"LPG\/Propane","ID":813,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":523846.2564,"EMISSIONFACTOR":0.05307,"NAME":"Natural Gas","ID":810,"UNITOFMEASURE":"million BTU"},{"ENERGYUSE":"","EMISSIONFACTOR":0.285618,"NAME":"Wood","ID":819,"UNITOFMEASURE":"Kilograms"},{"ENERGYUSE":"","EMISSIONFACTOR":"","NAME":"Other","ID":808,"UNITOFMEASURE":""}]

我期待从JSON字符串只得到名称和ID到使用jQuery选择列表。因此，例如填充当选择会是这个样子：

<select id="EnergyList" name="EnergyList"> 
<option value="813">Nataural Gas</option> 
<option value="812">Coal</option> 
    etc etc... 
</select>

任何帮助，这将大大appeciated.Thankyou。

来源

2012-08-08 jeeperscreepers

使用jQuery，你可以动态地追加基于解析的json源的选项。

var items = JSON.parse(jsonSource); 

var $selectElement = $("#EnergyList"); 

$(items).each(function(){ 
    var newOption = '<option value="' + this.ID + '">' + this.NAME + '</option>'; 
    $selectElement.append(newOption); 
});

看到基于对优化ANKUR的评论工作DEMO

看到更多的优化版本如下：

var items = JSON.parse(jsonSource); 

var $selectElement = $("#EnergyList"); 
var newOptions = ''; 

for(index = 0; index < items.length; index++) 
{ 
    newOptions += '<option value="' + items[index].ID + '">' + items[index].NAME + '</option>'; 
} 

$selectElement.append(newOptions);

请参阅使用优化DEMO

纯粹为了对优化专题completness，查看所有4个变体的测试结果，比较每个和每个追加与追加完整集合。关闭课程for loop并将完整集作为ankur指出并执行最快。

jsPerf Test-Results

来源

2012-08-08 11:55:57 Nope

我建议建立全标记，然后在单次追加它。否则，通过这种方法，我们将最终为每个选项更新DOM。 – Ankur 2012-08-08 12:05:33

@ankur：为了优化代码，你确实是正确的，另外还有一个简单的javascript'for i = 0; ...'会比'.each（）'更快。 – Nope 2012-08-08 12:09:58

酷.....不知道关于jsPerf .. +1为了启发我们..添加了一个测试用例，它只需加入字符串就可以更快地完成... http：//jsperf.com/for-vs-each -and-append-single-vs-complete/2 – Steen 2012-08-08 13:06:25

您可以使用JSON.parse(data)将JSON字符串转换为Object。然后JsonObj.Name,JsonObj.ID或任何你需要的，你可以从对象中获得。

为您的代码

var jsonObj = JSON.parse(yourJson); 
var optionTemplate = '<option value = "@@[email protected]@">@@[email protected]@</option>'; 
var finalTemplate = ''; 
$.each(jsonObj, function(){ 
    tmp = optionTemplate; 
    tmp = tmp.replace("@@[email protected]@",this.NAME).replace("@@[email protected]@",this.ID); 
    finalTemplate += tmp; 
}); 
finalTemplate = '<select id = "EnergyList" name = "EnergyList">' + finalTemplate + '</select>'; 
console.log($(finalTemplate));

来源

2012-08-08 11:37:39 Ankur

像这样的事情？

var Url = "/feedpage.aspx"; 
var jsonObjectInstance = $.parseJSON(
    $.ajax({ 
     url: Url, 
     async: false, 
     dataType: 'json' 
     } 
    ).responseText 
); 
var str ='<select id="EnergyList" name="EnergyList">'; 



for (var i = 0; i < jsonObjectInstance.length; i++) { 
str += '<option value="'+jsonObjectInstance[i].ID+'">'+jsonObjectInstance[i].NAME+'</option>'; 
} 
str+='</select>'; 
$("#divToInsertIn").html(str);

注：

你可能alrady有获取数据的一部分。而我用异步获取数据无特殊原因....

来源

2012-08-08 11:50:06 Steen

如果你的脚本返回JSON数据无论如何，你可以让jQuery直接为你解析它：

$.getJSON({ 
    url: yourAjaxUrl, 
    data: yourData, 
    success: function(jsonData) { 
     insertOpts(jsonData); 
    } 
}); 

var insertOpts = function(data) { 
    var $select = $('yourSelect').clone(true); // clone the select box 
    $.each(data, function(i, obj) { // generate all the options temporarily in jQuery 
     var $option = $select.append('<option />'); 
     $option.val(obj.ID).text(obj.NAME); 
    }); 
    $('yourSelect').replaceWith($select); // replace the existing select with its manipulated clone 
}

来源

2012-08-08 11:52:58 Simon

json=[{"ENERGYUSE":"","EMISSIONFACTOR":2.332,"NAME":"Coal","ID":812,"UNITOFMEASURE":"Metric tons"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Diesel","ID":816,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":26635048.359808,"EMISSIONFACTOR":0.0005703,"NAME":"Electricity","ID":811,"UNITOFMEASURE":"KWH"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Fuel Oil","ID":814,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002328,"NAME":"Gasoline","ID":815,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002603,"NAME":"Jet Fuel","ID":818,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.00269,"NAME":"Kerosene","ID":817,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.001509,"NAME":"LPG\/Propane","ID":813,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":523846.2564,"EMISSIONFACTOR":0.05307,"NAME":"Natural Gas","ID":810,"UNITOFMEASURE":"million BTU"},{"ENERGYUSE":"","EMISSIONFACTOR":0.285618,"NAME":"Wood","ID":819,"UNITOFMEASURE":"Kilograms"},{"ENERGYUSE":"","EMISSIONFACTOR":"","NAME":"Other","ID":808,"UNITOFMEASURE":""}] 
$("#EnergyList").empty() 
$.each(json,function(i,o),function(){ 
    $("#EnergyList").append('<option value="'+o.ID+'">'+o.NAME+'</option>') 
})

来源

2012-08-08 11:56:51 Nick

JSON数据选择列表：只有特定的键

回答

相关问题