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

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.

McGarnagle · Accepted Answer · 2012-04-27 20:27:40Z

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

edited Apr 27, 2012 at 20:27

answered Apr 27, 2012 at 20:17

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Energetic Pixels Over a year ago

dbaseman, Thank you for the education. I knew I was putting too much into it. My problem just seemed simpler than I was making it. But I noticed a problem when I put it into action. I am only seeing the last sked item being rendered. I proved this by commenting out the last two sked objects in my .json file. Reran my application. Now it rendered just the first sked object. So somewhere, I am missing an outer loop or I am starting my loop at the wrong place. Any ideas??

Energetic Pixels Over a year ago

check out www.serco-hrc.com/crseCatalog/index.html. Select Course Catalog from either menu. Go to second ("next") page of data. Then select "Ammo-29 Electrical Explosives Safety for Na...". There should be 3 course offerings that it brings up. Got me baffled. Code looks correct. tony

Niks · Accepted Answer · 2012-04-28 04:58:25Z

0

I must be doing something fundamentally wrong

Yes you are.

When you use .each loop, you refer to the current element by this keyword. So you do not need the for loop. Or, if you want the for loop, you do not need the .each loop. In my opinion, use the for loop. .each is just an overhead in this case.

UPDATE: @dbaseman gave you exactly what you need :)

UPDATE 2: Please try the following code. Basically its same as that of dbaseman, but dbaseman's snippet missed closing the <tr> element.

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 += "</tr>"; // should close the <tr> here
    }
}

edited Apr 28, 2012 at 4:58

answered Apr 27, 2012 at 20:25

Niks

4,8604 gold badges39 silver badges57 bronze badges

5 Comments

Energetic Pixels Over a year ago

Nikhil, (that's Sanskrit, I believe). But on another note, I followed dbaseman's suggestion, and it works like a charm. But it only renders one table row, no matter how many schedule objects there are. Do I need to rethink my json format/schema?? I tried wrapping @dbaseman "for" loop in another "for" loop, but that went back to a return of undefined. Tony

Niks Over a year ago

@EnergeticPixels I'm pleasantly surprised! Yes, It is sanskrit :) I think your schema is OK you need not change it, its just the for loop that we need to correct

Energetic Pixels Over a year ago

Yah, I have prior knowledge of the language. I am a retired US Navy linguist (Russian language). I did notice the </td> that was in the wrong place when he sent it to me. I automatically put a correct </tr> in its place. And I just noticed that all these examples do not have any escaped characters. My code did. so I went back and removed the "\" from closing tags. Did not help. The code is building a correct <tr> line, it is just not building a new <tr> line with each iteration. Tony

Energetic Pixels Over a year ago

Hey, I figured it out. It finally dawned on me that my current code was not telling the system to build a brand new <tr> line. I moved this line of code: [code]$('#schedule tbody').append($(html));[/code] to inside the for loop and everything works as advertised. I get all three course offering listings. Thank your for all the good help!! dhanyawādāh @dbaseman - thank for for getting me going down the correct 'road' to success! Tony

Niks Over a year ago

Yes I did read that in your profile! Glad I could help. Sadaiwa Swagatam :)

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related