jQuery autopopulate select drop down from JSON issues

Question

I have an issue regarding to auto populating a select dropdown from jQuery/JSON data which is return from a ColdFusion CFC, the code is below:

$(function(){
$("#licences-add").dialog({autoOpen:false,modal:true,title:'Add Licences',height:250,width:380});

});

function openAddLicence(intInstanceID,szName,szDatasourceName){
$.getJSON('/ASPAdmin/billing/handler.cfc?method=ListLicenceTypes&queryformat=column',{szInstanceDatasource:szDatasourceName}, 
    function(data){   
        $.each(data,function(){
            $('<option></option>').val(data.DATA.UUIDLICENCETYPE).text(data.DATA.SZLICENCETYPE).appendTo('#uuidLicenceType');
        });
    });
$("#intInstanceID").attr('value', intInstanceID);
$('span#szInstanceName').text(szName);
$("#licences-add").dialog('open');};

The json returned is:

{"ROWCOUNT":1,"COLUMNS":["UUIDLICENCETYPE","SZLICENCETYPE"],"DATA":{"UUIDLICENCETYPE":["480CE560-BCD3-C7AC-AF50B3C71BBCC473"],"SZLICENCETYPE":["Standard"]}}

However i get the following error:

$("").val(this.UUIDLICENCETYPE).text is not a function

Any ideas?

HTML:

<tr>
<td><label for="uuidLicenceType" title="Select the licence type (required).">Licence Type</label> <span class="req">*</span></td>
<td>
    <select name="uuidLicenceType" id="uuidLicenceType" class="bmSelect">
        <option value=""></option>
    </select>
</td>
</tr>

Answer 1

Since the JSON you're returning isn't an array, you just need this:

function(data){
  var select = $('#uuidLicenceType');
  $('<option />', {
    val: data.DATA.UUIDLICENCETYPE,
    text: data.DATA.SZLICENCETYPE[0]
  }).appendTo(select);
}

The $.each() the current code calls is looping over the oject's properties...to see this just put alert(this) in the loop, so inside the loop it's seeing 1, the column array, and the data object at the end. You can see this in a demo here.

Since you just want to access properties on a single object, use the dot notation above to get at them directly. If you change the format and get an array of these, then wrap what I have above in a $.each() and replace data with this inside that loop.

Updated for comments: Your SZLICENCETYPE is being returned as an array: "SZLICENCETYPE":["Standard"], so you need to fetch the first element from it using [0].