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數據選擇列表：只有特定的鍵

回答

相關問題