Energetic Pixels Energetic Pixels - 1 month ago 5
Javascript Question

Looping through json subobjects and doing something with each "element"

I am a newbie with json arrays/objects. I am trying to get to some subobjects within my .json file. I have tried the suggestions on here, but I keep getting "undefined" results. Here is the .json --

{
"DACcourses": [
{
"longTitle": "<a href='#'>Ammo-29 Electrical Explosives Safety for Naval Facilities</a>",
"longDescript": "ammo-29.html",
"atrrsLink": "Win 95+",
"delMeth": "standard",
"sked": [
{
"classNumb": "926",
"startDate": "4/16/2012",
"endDate": "4/20/2012",
"location": "NMC Fort Worth, TX",
"status": "scheduled",
"emptySeats": "Availability"
},
{
"classNumb": "001",
"startDate": "6/4/2012",
"endDate": "6/8/2012",
"location": "McAlester, OK",
"status": "scheduled",
"emptySeats": "Availability"
},
{
"classNumb": "920",
"startDate": "6/18/2012",
"endDate": "6/22/2012",
"location": "Belle Chasse, LA",
"status": "scheduled",
"emptySeats": "Class Full"
}
]}
]}


I must be doing something fundamentally wrong. so here is my code. In the end I am trying to build table rows out of each of the 'sked' objects. But I am having problems with getting individual data elements to show in the console. Here has been my attempts:

$('#content').on("click", "#catList tbody tr", function() {
var aData = oTable.fnGetData( this );
console.log( aData );
var scheduleData = aData.sked;
var catLink = 'catalog/' + aData.longDescript;
$('#fullDescript').load(catLink, function() {
if (!$('#fullDescript #offerings')) {
$('.enrollBTN').hide();
};

if ($(scheduleData).length > 0) {
$(scheduleData).each(function() {
for(var i = 0; i < scheduleData.length; i++) {
/*var startDate = aData.sked.startDate[2];
var endDate = aData.sked.endDate[3];
var location = aData.sked.location[4];
var classNumb = aData.sked.classNumb[1];
var status = aData.sked.status[5];
var emptySeats = aData.sked.emptySeats[6];*/
//var item = scheduleData[i];
console.log( aData.sked.startDate[2] );
var html = "<tr>";
html += "<td>" + item.classNumb + "<\/td>";
//console.log( aData.sked[1].classNumb );
/*html += "<td>" + scheduleData.endDate + "<\/td>";
html += "<td>" + scheduleData.location + "<\/td>";
html += "<td>" + scheduleData.classNumb + "<\/td>";
html += "<td>" + scheduleData.status + "<\/td>";
html += "<td>" + scheduleData.emptySeats + "<\/td>";*/
html += "<\/tr>";
//return scheduleData;
};
$('#schedule tbody').append($(html));
});
};
});

$('#content').hide();
$('#fullDescript').show();
});


Any help is appreciated.

Answer

It seems like you would only need the each or for loop, but not both. It also looks like there's some confusion in there on whether to use item = scheduleData[i] or not. Try this:

if ($(scheduleData).length > 0) {
    for(var i = 0; i < scheduleData.length; i++) {
        var item = scheduleData[i];
        var html = "<tr>";
        html += "<td>" + item.endDate + "</td>";
        // ... etc
        html += "</td>";
    }
}

Just as a PS, I'd recommend looking into a JS templating tool like Mustache.js. This would allow you to separate data from display template, so you could eliminate the parsing code. It would look something like this:

var template = "{{#sked}}<tr><td>{{endDate}}</td><td>{{location}}</td></tr>{{/sked}}";
var html = "<table>" + Mustache.render(template, aData) + "</table>";
Comments