javascript - json を選択タグ +js にロードします

Question

このjsonを選択タグに入力する方法

var data = {
"266": "Andy Employee II",
"26": "Annette Oliveira",
"214": "Edwina Umeyor",
"39": "Eva Britton",
"193": "Leigh Otterson",
"68": "Louise Edelston",
"71": "Margaret Williams",
"97": "Simon Harris"
};

オンライン編集リンクはこちら。

Answer 1

これを行う方法はたくさんあります: HTML 文字列を構築して DOM に詰め込む、タグを作成してそれにタグを 1 つずつselect追加する、または多くのクライアント側フレームワークの 1 つを使用することができます。 option、ほとんどの場合、テンプレートを介してこれを行う方法があります。

楽しみのために、フレームワークなしで純粋な JS でこれを行う方法を次に示します。

var data = {
  "266": "Andy Employee II",
  "26": "Annette Oliveira",
  "214": "Edwina Umeyor",
  "39": "Eva Britton",
  "193": "Leigh Otterson",
  "68": "Louise Edelston",
  "71": "Margaret Williams",
  "97": "Simon Harris"
};

// Grab a reference to the element to which 
// which we want to append the select tag, in 
// this case the body.  
var body = document.getElementsByTagName('body')[0];

// Create the select tag
var select = document.createElement('select');

var key, option, text;

// Loop over our data, creating an option tag
// for each and appending it to the select tag.
for (key in data) {
  option = document.createElement('option');
  option.value = key;
  text = document.createTextNode(data[key]);
  option.appendChild(text);
  select.appendChild(option);    
}

// Insert the select tag into the DOM.
body.appendChild(select);

そして、これが実際のフィドルです

Answer 2

jquery.each を使用して、JSON 配列を反復処理できるはずです。

jQuery.each(json_data, function(index, value) {
    $("#myselect").append("<option value='" + index + "'>" + value + "</option>");
});

編集: 以下のコメントによると、最初に $.parseJSON() を使用して JSON 構造を解析し、結果の値に対して上記のコードを実行する必要があります (元のデータを $.getJSON で取得しない限り、その場合は受け取った時点ですでに解析されています。

Answer 3

この場合、Ajax コールバックからの Json がありました。したがって、Jsone が文字列でないことを確認する必要があります。

data = jQuery.parseJSON(data);    
var select = $('#ShiftUserId');

その後

$.each(data, function(key, val){
var option = $('<option/>');
option.attr('value', key)
      .html(val)
      .appendTo(select);
});

また

    data = jQuery.parseJSON(data);        
    data = jQuery.parseJSON(data);    
    jQuery.each(data, function(index, value) {
        console.log(index);
        $('#ShiftUserId').append( $('<option></option>').val(index).html(value) );
    });

また

以下の回答