JSON-Daten zur Auswahl-Liste nur bestimmte Tasten

Dies ist die JSON-Daten, die zurückgegeben wird:

[{"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":""}]

Ich bin auf der Suche, um nur den NAMEN und die ID aus der JSON-string in ein select-Liste mit jquery.
So zum Beispiel das wählen würde wie folgt Aussehen, wenn gefüllt:

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

Jede Hilfe zu diesem wäre sehr appeciated.Danke.

InformationsquelleAutor jeeperscreepers | 2012-08-08

  1. 1

    Mithilfe von jQuery können Sie dynamisch anfügen der Optionen auf der Grundlage des geparsten json-Quelle.

    var items = JSON.parse(jsonSource);

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

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

    Finden Sie unter arbeiten DEMO

    Basierend auf ankur ' s Kommentar nach der Optimierung sehen Sie unten die mehr optimierte version:

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

    Finden Sie unter arbeiten optimiert DEMO

    Rein für die Vollständigkeit auf die Optimierung Thema finden Sie unter die test-Ergebnisse auf alle 4 Varianten, Vergleich für vs jeden und einzelnen Anhängen vs Anhängen den kompletten Satz.
    Natürlich for loop und Anhängen der komplette Satz als ankur darauf hingewiesen, führt der Schnellste.

    jsPerf Test-Ergebnisse

    Ich würde vorschlagen, erstellen das ganze markup, und dann man es mit einem einzigen Schuss. Ansonsten mit diesem Ansatz werden wir am Ende aktualisieren von DOM-für jede option.
    Optimieren Sie den code, den Sie sind in der Tat richtig, und zusätzlich einen einfachen javascript - for i =0; ... wäre wieder schneller als die .each() als gut.
    Cool.....wusste nicht, über die jsPerf.. +1 für enlighting uns.. Hinzugefügt ein test-Fall das ist slichtly schneller nur durch verbinden von strings...jsperf.com/for-vs-each-and-append-single-vs-complete/2
    Ich Liebe jsPerf, bekommt man zu denken und Spaß zu Durcheinander herum mit. Netter Zusatz.
    Wollte nur sagen, danke an alle, die dazu beigetragen hier, ich habe jetzt es arbeitet nach dem code JC

    InformationsquelleAutor Nope

  2. 0

    Etwas so????

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

    Hinweis:

    Du wahrscheinlich alrady haben die get-Daten Teil.. Und ich habe mit async, um Daten ohne besonderen Grund....

    InformationsquelleAutor Steen

  3. 0
    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>')  
 })

    InformationsquelleAutor Nick

  4. 0

    Können Sie JSON.parse(data) zum konvertieren der JSON-string zu Objekt. Dann JsonObj.Name, JsonObj.ID oder was auch immer Sie brauchen, Sie bekommen können aus dem Objekt.

    Für Ihren code 

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

    InformationsquelleAutor Ankur

  5. 0

    Wenn Ihr Skript gibt JSON-Daten zu erhalten, können Sie damit jQuery-analysieren es direkt für Sie:

    $.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
}

    InformationsquelleAutor Simon

Schreibe einen Kommentar