循环浏览json子对象并对每个“元素”做些什么

Question

我是一个带有json数组/对象的新手。我正在尝试访问我的.json文件中的一些子对象。我在这里试过了这些建议，但我一直在收到“未定义”的结果。这里是.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" 
     } 
     ]} 
]} 

我必须做一些根本性的错误。所以这里是我的代码。最后，我试图从每个“sked”对象中构建表格行。但我在获取单个数据元素以在控制台中显示时遇到问题。这里一直是我的尝试：

$('#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(); 
       }); 

任何帮助表示赞赏。

Answer 1

看起来好像你只需要每个或为循环，但不是两个。它看起来似乎有一些混淆是否使用item = scheduleData [i]或不。试试这个：

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

就像一个PS，我建议寻找一个JS模板工具，如Mustache.js。这将允许您从显示模板中分离数据，因此您可以消除解析代码。这将是这个样子：

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

Answer 2

我必须做一些根本性的错误

是的，你是。

当您使用.each循环时，您可以通过this关键字引用当前元素。所以你不需要for循环。或者，如果您需要for循环，则不需要.each循环。在我看来，使用for循环。在这种情况下，.each只是一个开销。

UPDATE： @dbaseman给你，你需要什么:)

更新2：请尝试以下代码。基本上和dbaseman一样，但是dbaseman的片段错过了关闭<tr>元素。

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 
    } 
}