从 json 对象的字段中求和值并显示为表中 td 中的值答案

【问题标题】：Summing values from json object's fields and display as values in td in table从 json 对象的字段中求和值并显示为表中 td 中的值
【发布时间】：2021-06-16 17:21:35
【问题描述】：

这是我在adding-json-object-via-data-to-dynamically-added-td-via-jquery的问题的延续

我正在使用JQuery、HTML/CSS 和AJAX 开发时间表/资源时间线。数据是从 REST API 检索的。如下图所示，我已经成功地完成了部门所有行的显示，但我卡在了图片中的Total部分的开发中。在最后一行Total 中，我需要将td 附加到总行并显示基于所有部门的AJAX 数据的手推车总和。

HTML：

<div style="overflow-x:auto;">
        <table id="time_table" class="table-bordered table-condensed">
            <tr>
                <th class="first-column">Department</th>
                <th>7am</th>
                <th>730am</th>
                <th>8am</th>
                <th>830am</th>
                <th>9am</th>
                <th>930am</th>
                <th>10am</th>
                <th>1030am</th>
                <th>11am</th>
                <th>1130am</th>
                <th>12pm</th>
                <th>1230pm</th>
                <th>1pm</th>
                <th>130pm</th>
                <th>2pm</th>
                <th>230pm</th>
                <th>3pm</th>
                <th>330pm</th>
                <th>4pm</th>
                <th>430pm</th>
                <th>5pm</th>
                <th>530pm</th>
                <th>6pm</th>
                <th>630pm</th>
                <th>7pm</th>
                <th>730pm</th>
                <th>8pm</th>
                <th>830pm</th>
                <th>9pm</th>
                <th>930pm</th>
                <th>10pm</th>
                <th>1030pm</th>
                <th>11pm</th>
            </tr>
            <tr id="department01_row">
                <td class="first-column">Department01</td>
                <td>Department01</td>
            </tr>
            <tr id="depatment02_row">
                <td class="first-column">Depatment02</td>
            </tr>
            <tr id="department03_row">
                <td class="first-column">Department03</td>
            </tr>
            <tr id="department04_row">
                <td class="first-column">Department04</td>
            </tr>
            <tr id="department05_row">
                <td class="first-column">Department05</td>
            </tr>
            <tr><td class="first-column"></td></tr>
            <tr id="total_row">
                <td class="first-column">Total</td>
            </tr>
        </table>
    </div>

通过AJAX检索到的JSON数据如下或here：

{
  "is_active": true,
  "timeslots": [
    {
      "department": "department05",
      "end_time": "13:00:00",
      "id": 3,
      "start_time": "09:00:00",
      "trolleys": 10
    },
     {
      "department": "department03",
      "end_time": "13:00:00",
      "id": 7,
      "start_time": "12:30:00",
      "trolleys": 1
    },
    {
      "department": "department01",
      "end_time": "10:30:00",
      "id": 14,
      "start_time": "09:00:00",
      "trolleys": 4
    },
    {
      "department": "department01",
      "end_time": "13:00:00",
      "id": 20,
      "start_time": "12:00:00",
      "trolleys": 1
    },
    {
      "department": "department04",
      "end_time": "10:30:00",
      "id": 22,
      "start_time": "10:00:00",
      "trolleys": 3
    },
    {
      "department": "department03",
      "end_time": "12:30:00",
      "id": 26,
      "start_time": "12:00:00",
      "trolleys": 7
    }
  ]
}

JQuery/JavaScript：


//The code below is extracted from a function
//timeSlotData is data['timeslots'] which I retrieved via AJAX.


let sortedTimeSlotData = timeSlotData.sort(function(a, b) {
      return parseFloat(a.start_time) - parseFloat(b.start_time)
    })

//The times are fixed, i.e. 7am up to 1130pm which is 33 tds 
let timeArray: number[] = [7.00, 7.30, 8.00, 8.30,
    9.00, 9.30, 10.00, 10.30,
    11.00, 11.30, 12.00, 12.30,
    13.00, 13.30, 14.00, 14.30,
    15.00, 15.30, 16.00, 16.30,
    17.00, 17.30, 18.00, 18.30,
    19.00, 19.30, 20.00, 20.30,
    21.00, 21.30, 22.00, 22.30,
    23.00]
let $totalRowHTML: string[] = ['<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>']

//TODO: This is the loop I want to use to populate the "Total" row but I am stuck
for (let singleData of sortedTimeSlotData) {
  let startTime = parseFloat(singleData.start_time.substr(0, 5))
  let endTime = parseFloat(singleData.end_time.substr(0, 5))

  let startTimeIndex = timeArray.indexOf(startTime)
  let endTimeIndex = timeArray.indexOf(endTime)
  let timeLength = endTimeIndex - startTimeIndex

  const $tdSlot = $('<td>').attr('colspan', timeLength)
  
  //I only manage to get the number of trolleys from each object but not sure how to sum all departments' on the same time(s).
  $tdSlot.text(singleData.trolleys);

  $tdSlot.addClass('total-booked')

  $totalRowHTML[startTimeIndex] = $tdSlot

  if (timeLength > 1) {
    for (let i = 1; i < timeLength; ++i) {
      $totalRowHTML[startTimeIndex+i] = ''
    }
  }
}

$('#total_row').append($totalRowHTML)

【问题讨论】：

标签： javascript html jquery html-table

【解决方案1】：

我通过以下代码解决了我的问题。但是，请随时建议对我的代码进行优化。我真的很感谢你的cmets。谢谢。


//timeSlotData is data['timeslots'] which I retrieved via AJAX.
let sortedTimeSlotData = timeSlotData.sort(function(a, b) {
      return parseFloat(a.start_time) - parseFloat(b.start_time)
    })

    let $totalRowHTML: string[] = ['<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>','<td></td>']

    for (let singleData of sortedTimeSlotData) {
      let startTime = parseFloat(singleData.start_time.substr(0, 5).replace(":", "."))
      let endTime = parseFloat(singleData.end_time.substr(0, 5).replace(":", "."))

      let startTimeIndex = Scheduled.scheduledTimeArray.indexOf(startTime)
      let endTimeIndex = Scheduled.scheduledTimeArray.indexOf(endTime)-1
     

      for (let i = startTimeIndex; i <= endTimeIndex; i++) {
        let totalTrolley = parseInt(singleData.trolleys)

        if ($totalRowHTML[i] != '<td></td>') {
          let previousTotal = parseInt($totalRowHTML[i].replace('<td class="total-booked">', '').replace('</td>', ''))
          totalTrolley += previousTotal
        }

        const $tdSlot = '<td class="total-booked">' +  totalTrolley +'</td>'
        $totalRowHTML[i] = $tdSlot
      }
    }

    let currentRepeat = 1
    for (let i = 1; i <  $totalRowHTML.length; i++) {
      if ($totalRowHTML[i] != '<td></td>') {
        let total = parseInt($totalRowHTML[i].replace('<td class="total-booked">', '').replace('</td>', ''))
    
        // Using regex to get the number of previous total trolleys between <td...> and </td>
        const re = /(?<=>)(.*?)(?=<\/)/gi
        let previousTotal = parseInt(re.exec($totalRowHTML[i-1])[0])

      
        if (total == previousTotal) {
          currentRepeat++
          $totalRowHTML[i - 1] = ''
          $totalRowHTML[i] = '<td class="total-booked" colspan="' + currentRepeat + '">' + total + '</td>'
        } else {
          currentRepeat = 1
        }
      }

【讨论】：