JSON structure for jQuery each()

Question

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 1

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>

Answer 2

When you use $.each(), the callback's parameters are the index and the element.

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

I suggest changing the JSON keys to lowercase, that way you can use

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