使用jquery以表格格式显示数据

时间：2017-06-22 13:02:37

标签： javascript jquery html rest

我有以下json数据

{"sEcho":null,"iTotalRecords":0,"iTotalDisplayRecords":0,"aaData":[{"month":"June","studentAttendanceLists":[{"consolidatedData":{"totalPresent":4,"totalHolidays":0,"holidayWorkings":0,"totalSundays":3,"totalLeave":0,"totalAbsents":1,"totalDays":22,"workingDays":19,"presentPercentage":21.0,"dates":[]},"attendanceData":[{"attendanceDate":1497810600000,"isPresent":"P","studentName":"PINKY PREMARAM CHOUDHARY","studentId":338},{"attendanceDate":1497983400000,"isPresent":"P","studentName":"PINKY PREMARAM CHOUDHARY","studentId":338},{"attendanceDate":1497897000000,"isPresent":"P","studentName":"PINKY PREMARAM CHOUDHARY","studentId":338},{"attendanceDate":1497292200000,"isPresent":"P","studentName":"PINKY PREMARAM CHOUDHARY","studentId":338},{"attendanceDate":1496773800000,"isPresent":"A","studentName":"PINKY PREMARAM CHOUDHARY","studentId":338}]},{"consolidatedData":{"totalPresent":2,"totalHolidays":0,"holidayWorkings":0,"totalSundays":3,"totalLeave":1,"totalAbsents":2,"totalDays":22,"workingDays":19,"presentPercentage":10.0,"dates":[]},"attendanceData":[{"attendanceDate":1497810600000,"isPresent":"L","studentName":"Raman P Vishwakarma","studentId":334},{"attendanceDate":1497983400000,"isPresent":"A","studentName":"Raman P Vishwakarma","studentId":334},{"attendanceDate":1497897000000,"isPresent":"P","studentName":"Raman P Vishwakarma","studentId":334},{"attendanceDate":1497292200000,"isPresent":"P","studentName":"Raman P Vishwakarma","studentId":334},{"attendanceDate":1496773800000,"isPresent":"A","studentName":"Raman P Vishwakarma","studentId":334}]},{"consolidatedData":{"totalPresent":3,"totalHolidays":0,"holidayWorkings":0,"totalSundays":3,"totalLeave":0,"totalAbsents":2,"totalDays":22,"workingDays":19,"presentPercentage":15.0,"dates":[]},"attendanceData":[{"attendanceDate":1497810600000,"isPresent":"P","studentName":"AMIT ARVIND PATIL","studentId":335},{"attendanceDate":1497983400000,"isPresent":"P","studentName":"AMIT ARVIND PATIL","studentId":335},{"attendanceDate":1497897000000,"isPresent":"A","studentName":"AMIT ARVIND PATIL","studentId":335},{"attendanceDate":1497292200000,"isPresent":"A","studentName":"AMIT ARVIND PATIL","studentId":335},{"attendanceDate":1496773800000,"isPresent":"P","studentName":"AMIT ARVIND PATIL","studentId":335}]}],"links":[]},{"month":"May","studentAttendanceLists":[{"consolidatedData":{"totalPresent":1,"totalHolidays":0,"holidayWorkings":0,"totalSundays":4,"totalLeave":0,"totalAbsents":0,"totalDays":31,"workingDays":27,"presentPercentage":3.0,"dates":[]},"attendanceData":[{"attendanceDate":1494354600000,"isPresent":"P","studentName":"PINKY PREMARAM CHOUDHARY","studentId":338}]},{"consolidatedData":{"totalPresent":1,"totalHolidays":0,"holidayWorkings":0,"totalSundays":4,"totalLeave":0,"totalAbsents":0,"totalDays":31,"workingDays":27,"presentPercentage":3.0,"dates":[]},"attendanceData":[{"attendanceDate":1494354600000,"isPresent":"P","studentName":"Raman P Vishwakarma","studentId":334}]},{"consolidatedData":{"totalPresent":0,"totalHolidays":0,"holidayWorkings":0,"totalSundays":4,"totalLeave":1,"totalAbsents":0,"totalDays":31,"workingDays":27,"presentPercentage":0.0,"dates":[]},"attendanceData":[{"attendanceDate":1494354600000,"isPresent":"L","studentName":"AMIT ARVIND PATIL","studentId":335}]}],"links":[]}]}

我想以下列格式显示数据

Student Name           June                              May                 April
                Total Present|Total Absent       Total Present|Total Absent   Total Present|Total Absent
A                  2         | 3                       2      | 4               3          | 6

我将如何使用jquery来处理给定的json数据。

1 个答案:

答案 0 :(得分：0)

数据非常复杂，因此这不是最佳解决方案。我只是想检查一下，如果我能做到这一点。我希望这对你有帮助。

＆＃13;
＆＃13; 
let data = {
  "sEcho": null,
  "iTotalRecords": 0,
  "iTotalDisplayRecords": 0,
  "aaData": [{
    "month": "June",
    "studentAttendanceLists": [{
      "consolidatedData": {
        "totalPresent": 4,
        "totalHolidays": 0,
        "holidayWorkings": 0,
        "totalSundays": 3,
        "totalLeave": 0,
        "totalAbsents": 1,
        "totalDays": 22,
        "workingDays": 19,
        "presentPercentage": 21.0,
        "dates": []
      },
      "attendanceData": [{
        "attendanceDate": 1497810600000,
        "isPresent": "P",
        "studentName": "PINKY PREMARAM CHOUDHARY",
        "studentId": 338
      }, {
        "attendanceDate": 1497983400000,
        "isPresent": "P",
        "studentName": "PINKY PREMARAM CHOUDHARY",
        "studentId": 338
      }, {
        "attendanceDate": 1497897000000,
        "isPresent": "P",
        "studentName": "PINKY PREMARAM CHOUDHARY",
        "studentId": 338
      }, {
        "attendanceDate": 1497292200000,
        "isPresent": "P",
        "studentName": "PINKY PREMARAM CHOUDHARY",
        "studentId": 338
      }, {
        "attendanceDate": 1496773800000,
        "isPresent": "A",
        "studentName": "PINKY PREMARAM CHOUDHARY",
        "studentId": 338
      }]
    }, {
      "consolidatedData": {
        "totalPresent": 2,
        "totalHolidays": 0,
        "holidayWorkings": 0,
        "totalSundays": 3,
        "totalLeave": 1,
        "totalAbsents": 2,
        "totalDays": 22,
        "workingDays": 19,
        "presentPercentage": 10.0,
        "dates": []
      },
      "attendanceData": [{
        "attendanceDate": 1497810600000,
        "isPresent": "L",
        "studentName": "Raman P Vishwakarma",
        "studentId": 334
      }, {
        "attendanceDate": 1497983400000,
        "isPresent": "A",
        "studentName": "Raman P Vishwakarma",
        "studentId": 334
      }, {
        "attendanceDate": 1497897000000,
        "isPresent": "P",
        "studentName": "Raman P Vishwakarma",
        "studentId": 334
      }, {
        "attendanceDate": 1497292200000,
        "isPresent": "P",
        "studentName": "Raman P Vishwakarma",
        "studentId": 334
      }, {
        "attendanceDate": 1496773800000,
        "isPresent": "A",
        "studentName": "Raman P Vishwakarma",
        "studentId": 334
      }]
    }, {
      "consolidatedData": {
        "totalPresent": 3,
        "totalHolidays": 0,
        "holidayWorkings": 0,
        "totalSundays": 3,
        "totalLeave": 0,
        "totalAbsents": 2,
        "totalDays": 22,
        "workingDays": 19,
        "presentPercentage": 15.0,
        "dates": []
      },
      "attendanceData": [{
        "attendanceDate": 1497810600000,
        "isPresent": "P",
        "studentName": "AMIT ARVIND PATIL",
        "studentId": 335
      }, {
        "attendanceDate": 1497983400000,
        "isPresent": "P",
        "studentName": "AMIT ARVIND PATIL",
        "studentId": 335
      }, {
        "attendanceDate": 1497897000000,
        "isPresent": "A",
        "studentName": "AMIT ARVIND PATIL",
        "studentId": 335
      }, {
        "attendanceDate": 1497292200000,
        "isPresent": "A",
        "studentName": "AMIT ARVIND PATIL",
        "studentId": 335
      }, {
        "attendanceDate": 1496773800000,
        "isPresent": "P",
        "studentName": "AMIT ARVIND PATIL",
        "studentId": 335
      }]
    }],
    "links": []
  }, {
    "month": "May",
    "studentAttendanceLists": [{
      "consolidatedData": {
        "totalPresent": 1,
        "totalHolidays": 0,
        "holidayWorkings": 0,
        "totalSundays": 4,
        "totalLeave": 0,
        "totalAbsents": 0,
        "totalDays": 31,
        "workingDays": 27,
        "presentPercentage": 3.0,
        "dates": []
      },
      "attendanceData": [{
        "attendanceDate": 1494354600000,
        "isPresent": "P",
        "studentName": "PINKY PREMARAM CHOUDHARY",
        "studentId": 338
      }]
    }, {
      "consolidatedData": {
        "totalPresent": 1,
        "totalHolidays": 0,
        "holidayWorkings": 0,
        "totalSundays": 4,
        "totalLeave": 0,
        "totalAbsents": 0,
        "totalDays": 31,
        "workingDays": 27,
        "presentPercentage": 3.0,
        "dates": []
      },
      "attendanceData": [{
        "attendanceDate": 1494354600000,
        "isPresent": "P",
        "studentName": "Raman P Vishwakarma",
        "studentId": 334
      }]
    }, {
      "consolidatedData": {
        "totalPresent": 0,
        "totalHolidays": 0,
        "holidayWorkings": 0,
        "totalSundays": 4,
        "totalLeave": 1,
        "totalAbsents": 0,
        "totalDays": 31,
        "workingDays": 27,
        "presentPercentage": 0.0,
        "dates": []
      },
      "attendanceData": [{
        "attendanceDate": 1494354600000,
        "isPresent": "L",
        "studentName": "AMIT ARVIND PATIL",
        "studentId": 335
      }]
    }],
    "links": []
  }]
};

$(document).ready(function() {
  let numbreOfMonths = data["aaData"].length;
  let monthCounter = 0;
  $.each(data["aaData"], function(index, value) {
    $("#attendanceHeadL1").append('<th colspan="2">' + value["month"] + '</th>');
    $("#attendanceHeadL2").append('<th>Total Present</th><th>Total Absent</th>');
    monthCounter++;

    // For names
    $.each(value['studentAttendanceLists'], function(index2, value2) {
      if (monthCounter > 1) {
        return false;
      }

      let studentName = value2['attendanceData'][0]['studentName'];
      let studentId = value2['attendanceData'][0]['studentId'];

      $("#attendance tbody").append('<tr id=student_' + studentId + '><td>' + studentName + '</td></tr>');

    });

    // For attendance data
    $.each(value['studentAttendanceLists'], function(index2, value2) {
      let studentId = value2['attendanceData'][0]['studentId'];
      let totalPresent = value2['consolidatedData']['totalPresent'];
      let totalAbsent = value2['consolidatedData']['totalLeave'];
      $("#student_" + studentId).append('<td>' + totalPresent + '</td><td>' + totalAbsent + '</td>');
    });

  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="attendance">
  <thead>
    <tr id="attendanceHeadL1">
      <th>Student Name</th>
    </tr>
    <tr id="attendanceHeadL2">
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>

    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题