動的に私はこのようなJSONデータを引き戻すことになるjqueryのAJAX呼び出していJSON +選択オプション

Question

から選択したHTMLを構築：

{ 
    "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" 
} 

私はそれにバインドされたHTMLを選択を構築したいというデータからを。たとえば：

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

私のjsのコードは、多くの場合（常にではないが）、JSONの「エピソード」のデータ要素にマップされ、すでにエピソード番号を知っているだろう。私がエピソードを知っているとき、私は選択の中でそのオプションをあらかじめ選択したいと思う。私がそれを知らないなら、あらかじめ選択する必要はありません。すべてのケースで、各レコードのオプションを作成したいと思います。これは、ユーザーがデータを入力するまでこのjsonを元に戻すことができないため、jsで動的に発生する必要があります。

私はajax呼び出しがすべて機能しているので、そのデータにバインドされた選択肢に動的にオプションを追加する方法を知り、そのエピソードを知っているときにオプションを自動選択する必要があります。

純粋なjqueryソリューションが理想的ですが、私はちょうどjsにも満足しています。

どうやってですか？ （ありがとう！）

注：これはthis postの複製ではありません。私の質問では、jsonデータへのバインディングはパズルの重要な部分です。

Answer 1

のJavascript ES5ソリューション

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

は、ここで全体のソリューションです。

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

appendと組み合わせて$.eachメソッドを使用する必要があります。

$.each方法はコールバック機能を受け付ける汎用イテレータ関数を表します。

appendは、パラメータで指定された内容を、一致する要素のセット内の各要素の末尾に挿入するために使用されます。

また、選択肢の配列を作成するためにmapメソッドを使用しました。

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

特にリストを作成する：

//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>"); 
});