2017-11-29 18 views
1

jQueryを使用してJSONを操作する方法を考えることができません。私は、選択オプションとして使用されるいくつかのキー/値のペアで正しく返答しているajaxクエリを持っています。jQueryのJSON構造体each()

[{"Value":"???","Text":"??? - Unknown"}, 
{"Value":"AAA","Text":"AAA - A Company"}, 
{"Value":"BBB","Text":"BBB - B Company"}, 
{"Value":"CCC","Text":"CCC - C Company"}, 
{"Value":"DDD","Text":"DDD - D Company"}, 
{"Value":"EEE","Text":"EEE - E Company"}, 
{"Value":"FFF","Text":"FFF - F Company"}] 

私は今コメントアウト、さまざまな方法を試したところあなたが見ることができます

$(function() { 

    $("#sqlServerControl").change(function() { 
     var sqlServer = $(this).find(":selected").val(); 
     $.ajax({ 
      url: "http://localhost/ReportGroupsHelper/Ajax/GetOrganisationData.cshtml", 
      type: "GET", 
      data: "sqlserver=" + sqlServer, 
      dataType: "json", 
      success: function (data) { 
       var options, index, select, option; 

       // Get the raw DOM object for the select box 
       select = $("#organisationControl"); 

       // Clear the old options 
       if (select.options != null) { 
        select.options.length = 0; 
       } 

       // Load the new options 
       //options = data.options; 
       //for (index = 0; index < options.length; ++index) { 
       // option = options[index]; 
       // select.options.add(new Option(option.text, option.value)); 
       //} 

       $.each(data, function (key, value) { 
        select.append($("<option/>", { 
         value: key, 
         text: value 
        })); 
       }); 
      } 
     }); 

    }); 
}); 

を次のように私のjQueryのです。現在は$.eachに達していて、過去にスキップします。ターゲット制御のためのHTMLは、あなたが$.each()を使用する場合は、コールバックのパラメータは、インデックスと要素でちょうど

<fieldset> 
     <label for="organisationControl">Organisation</label> 
     <select name="organisation" id="organisationControl"></select> 
    </fieldset> 
+0

'{ 値:value.Value、 テキスト:value.Text }' –

+0

はあなたが現在のデータを取得していますか?あなたは正しい要素にマッチしていると確信していますか?とにかく、あなたが挿入しようとしているテキストを変更していなければ、あなたのhtmlの作成はおそらくうまくいかないでしょう。現在、あなたは[Object Object] – Axnyff

答えて

3

valueを使用することができ、そのようにあなたがeach()で探している値ではありません。 value.Valuevalue.Textを使用する必要があります。あなたが必要とする

var data = [{"Value":"???","Text":"??? - Unknown"}, 
 
{"Value":"AAA","Text":"AAA - A Company"}, 
 
{"Value":"BBB","Text":"BBB - B Company"}, 
 
{"Value":"CCC","Text":"CCC - C Company"}, 
 
{"Value":"DDD","Text":"DDD - D Company"}, 
 
{"Value":"EEE","Text":"EEE - E Company"}, 
 
{"Value":"FFF","Text":"FFF - F Company"}]; 
 

 
var options, index, select, option; 
 

 
// Get the raw DOM object for the select box 
 
select = $("#organisationControl"); 
 

 
// Clear the old options 
 
if (select.options != null) { 
 
    select.options.length = 0; 
 
} 
 

 
// Load the new options 
 
//options = data.options; 
 
//for (index = 0; index < options.length; ++index) { 
 
// option = options[index]; 
 
// select.options.add(new Option(option.text, option.value)); 
 
//} 
 

 
$.each(data, function (key, value) { 
 
    select.append($("<option/>", { 
 
     value: value.Value, 
 
     text: value.Text 
 
    })); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
    <label for="organisationControl">Organisation</label> 
 
    <select name="organisation" id="organisationControl"></select> 
 
</fieldset>

1

です。

$.each(data, function(i, option) { 
    select.append($("<option/>", { 
    value: option.Value, 
    text: option.Text 
    })); 
}); 

私は小文字にJSONのキーを変更する提案、あなたが

$.each(data, function(i, option) { 
    select.append($("<option/>", option)); 
});