How to bind into a dropdown values from a json item

Question

Im a having a long night here

The result of the webservice is in json. However data returned comes with diagnosic data. How do I get the result set only?

Here is my code:

http://jsfiddle.net/bkyg23cx/

 $(document).ready(function () { $.ajax( { type: "POST", contentType: "application/json; charset=utf-8", url: "http://website.com", data: data, dataType: "json", success: function (data) { alert('Total results found: ' + data.result.total); $.each(data.result.records, function (value) { $("[id$='uxRegion']").append($("<option></option>").val(value.province).html(value.province)); }); } error: function ajaxError(response) { alert(response.status + ' ' + response.statusText); } }); }); 

Here is the problematic json value

 { "value1": "etetetetete", "value2": true, "result": { "records": [ { "province": "Star world" }, { "province": "CNN" } ], "fields": [ { "type": "text", "id": "province" } ], "hash": "hash value" } } 

Answer 1

You can set data.result.records as a local variable records , just like below：

success: function (data) {
    var records = data.result.records;

    alert('Total results found: ' + records.length);

    $.each(records, function (value) {
        $("[id$='uxRegion']").append($("<option></option>")
                             .val(value.province)
                             .html(value.province));
    });
}

And You don't have total property on result object, you should use .length .