Dynamisch bauen html von json wählen + wählen Sie die Option

Question

Ich habe eine Jquery Ajax-Aufruf, die JSON-Daten wie diese werden zurückziehen:

{ 
    "Title":"The Office", 
    "Season":"1", 
    "totalSeasons":"9", 
    "Episodes":[ 
     { 
     "Title":"Pilot", 
     "Released":"2005-03-24", 
     "Episode":"1", 
     "imdbRating":"7.6", 
     "imdbID":"tt0664521" 
     }, 
     { 
     "Title":"Diversity Day", 
     "Released":"2005-03-29", 
     "Episode":"2", 
     "imdbRating":"8.3", 
     "imdbID":"tt0664514" 
     }, 
     { 
     "Title":"Health Care", 
     "Released":"2005-04-05", 
     "Episode":"3", 
     "imdbRating":"7.9", 
     "imdbID":"tt0664517" 
     }, 
    ], 
    "Response":"True" 
} 

Aus diesen Daten Ich möchte eine HTML bauen, um es auszuwählen gebunden. Zum Beispiel:

<select> 
    <option value="tt0664521">Pilot - Episode 1</option> 
    <option value="tt0664514">Diversity Day - Episode 2</option> 
    <option value="tt0664517">Health Care - Episode 3</option> 
</select> 

Mein js Code wird oft (aber nicht immer) kennen bereits die Folge-Nummer, die in der json auf die „Episode“ Datenelement abbildet. Wenn ich die Episode kenne, möchte ich diese Option in der Auswahl vorwählen. Wenn ich es nicht weiß, keine Vorauswahl. In allen Fällen möchte ich eine Option für jeden Datensatz erstellen. Dies muss dynamisch in der js passieren, weil ich nicht in der Lage sein werde, diese json zurück zu bekommen, bis der Benutzer einige Daten eingibt.

Ich habe die Ajax Anrufe alle funktioniert, ich muss nur wissen, wie Optionen zu meiner ausgewählten Grenze zu diesen Daten dynamisch hinzufügen, und dann eine Option automatisch auswählen, wenn ich die Episode kenne.

Eine reine jquery Lösung wäre ideal, aber ich bin auch glücklich mit js.

Wie wird es gemacht? (Und danke!)

Hinweis: Dies ist kein Duplikat von this post. In meiner Frage ist die Bindung an JSON-Daten ein Schlüsselelement des Puzzles.

Answer 1

Javascript ES5 Lösung. Vergessen Sie nicht, eine ID zu Ihrer Auswahl ("my_select") zu geben:

var data = { 
    "Title": "The Office", 
    "Episodes": [ 
    { 
     "Title": "Pilot", 
     "Episode": "1", 
     "imdbID": "tt0664521", 
     //... 
    }, 
    //... 
    ] 
}; 

var list = data['Episodes']; 
var sel = document.getElementById('my_select'); 
for(var i = 0; i < list.length; i++) { 
    var opt = document.createElement('option'); 
    opt.innerHTML = list[i]['Title'] + ' - Episode ' + list[i]['Episode']; 
    opt.value = list[i]['imdbID']; 
    sel.appendChild(opt); 
} 

Answer 2

Sie müssen $.each Methode in Kombination mit append verwenden.

$.each Methode stellt eine generische Iterator Funktion, die eine Rückruffunktion übernimmt.

append wird zum Einfügen von Inhalt, der durch den Parameter angegeben wird, an das Ende jedes Elements in der Menge der übereinstimmenden Elemente verwendet.

Auch ich habe map Methode verwendet, um ausgewählte Optionen Array zu erstellen.

let selectOptions=obj.Episodes.map(function(episode){ 
    return {"value": episode.imdbID,"name":episode.Title+' - '+' Episode '+episode.Episode}; 
}); 

Hier ist die gesamte Lösung:

let obj={ 
 
    "Title":"The Office", 
 
    "Season":"1", 
 
    "totalSeasons":"9", 
 
    "Episodes":[ 
 
     { 
 
     "Title":"Pilot", 
 
     "Released":"2005-03-24", 
 
     "Episode":"1", 
 
     "imdbRating":"7.6", 
 
     "imdbID":"tt0664521" 
 
     }, 
 
     { 
 
     "Title":"Diversity Day", 
 
     "Released":"2005-03-29", 
 
     "Episode":"2", 
 
     "imdbRating":"8.3", 
 
     "imdbID":"tt0664514" 
 
     }, 
 
     { 
 
     "Title":"Health Care", 
 
     "Released":"2005-04-05", 
 
     "Episode":"3", 
 
     "imdbRating":"7.9", 
 
     "imdbID":"tt0664517" 
 
     }, 
 
    ], 
 
    "Response":"True" 
 
} 
 
let selectOptions=obj.Episodes.map(function(episode){ 
 
    return {"value": episode.imdbID,"name":episode.Title+' - '+' Episode '+episode.Episode}; 
 
}); 
 
let select=$('<select>'); 
 
$.each(selectOptions,function(index, item){ 
 
    select.append('<option value="'+item.value+'">'+item.name+'</option>'); 
 
}); 
 
$('body').append(select);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Für Erstellen der Liste speziell:

//Create an empty array. 
var list = []; 

//Add each option from JSON to the list array 
$.each(jsonData, function (key, value) { 
    list.push(key); 
}); 

//For every option in the list, add it into the select menu 
$.each(list, function (key, value) { 
    $("#my-select-element").append("<option value='" + value + "'>" + value + "</option>"); 
});