Question

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 1

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>";