JSON数据选择仅列出特定键

Question

这是返回的 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":""}]

我希望仅使用 jquery 将 JSON 字符串中的 NAME 和 ID 获取到选择列表中。 因此，例如，填充时选择看起来像这样：

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

对此的任何帮助将不胜感激。谢谢。

Answer 1

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

为你的代码

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

Answer 2

这样的？？

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);

注意：

你可能已经有了获取数据的部分。而且我已经使用异步来获取数据，没有什么特别的原因......

Answer 3

如果你的脚本仍然返回 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
}

Answer 4

使用 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);
});

查看工作DEMO

根据 ankur 对优化的评论，请参阅下面更优化的版本：

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

纯粹为了优化主题的完整性，请查看所有 4 种变体的测试结果，比较每个变体和单个附加与附加完整集。 偏离路线for loop 并按照 ankur 指出的那样附加完整集执行速度最快。

jsPerf Test-Results

Answer 5

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>')  
 })