Question

I’ve got a CFC thats returning a query object in JSON format, looks like this:

{
 "COLUMNS":["CMADDR","CMBILL","CMCRLIMIT","CMCRREVIEW","CMCRTERMS","CMCRUPDATE","CMCURR"],
 "DATA":[[1.2004856E7,3.2004856E7,0,"January, 01 1959 00:00:00","N\/30",null,"USD",null,false,false,false,"",0,"","US", ...],
        [2.2045505E7,3.2004583E7,4000,"January, 01 1959 00:00:00","1\/10N30",null,"USD",null,false,false....]]
}

data has been shortened just for structure sake

But I am given back a jSON object with columns & data.

What is the best way to access this data using jQuery? Excuse my inexperience, as in the past I’ve just used more simple structures, and I’ve usually defined them myself, this way the CFC returns this output to me and I’m forced to consume it and iterate through it with end result being a table of data.

I’ve tried the following, but get undefined values so far:

// ajax calls .. this is on success..
// ...
function(data) {
    //alert('got data back! \n'+data);
    var obj = jQuery.parseJSON(data);
    $.each(obj, function(index, itemData) {
    $('#modal-table-listing > tbody:last').append('<tr>' +
        '<td>[Select]</td>' +
        '<td>'+ itemData.cmAddr +'</td>' +
        '<td>'+ itemData.adName +'</td>' +
        '<td>'+ itemData.adState +' - '+ itemData.adCity +' - '+ itemData.adZip +'</td></tr>');
    });

    console.log(obj);
}

I’d love to use the columns object to reference the relevant data, if that makes sense.

Answer 1

Given your data structure, you really want to be looping through obj.data. Your returned object has TWO properties. One describes your columns, the next is an array of results.

var obj = jQuery.parseJSON(data);
$.each(obj.DATA, function(index, itemData) {
$('tbody:last').append('<tr>' +
    '<td>[Select]</td>' +
    '<td>'+ itemData[0]+'</td>' +
    '<td>'+ itemData[1] +'</td>' +
    '<td>'+ itemData[2] +' - '+ itemData[3] +' - '+ itemData[4] +'</td></tr>');
});

I don’t know what columns are which index, given the data. But you can figure it out via obj.columns.indexOf('CMADDR'); or something like that, that will give you 0.

Edit
You could probably easily write a quick map reduce with Underscore.js to get exactly the format you wanted. Something like

myData = _.map(obj.data, function(row){ 
             var item = {"column1" : row[0],
                         "column2" : row[1]}; 
              return item;
             }); `

This would result in myData being an array of objects with named properties.