Hecatonchires Hecatonchires - 6 months ago 52
Ajax Question

JSON structure for jQuery each()

I can't seem to work out how to use jQuery to manipulate my JSON. I have an ajax query that is correctly replying with some key/value pairs that are to be used as select options.

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


My jQuery is as follows

$(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
}));
});
}
});

});
});


You can see where I tried a different method, now commented out. Currently it hits the
$.each
and then skips past. The html for the target control is just

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

Answer Source

value is not the value you are looking for in each(). You need to use value.Value and value.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download