是否可以通过添加手动数据来更改从 JSON 数据生成的表？

Question

我正在通过从 php 脚本输入的 json 数据构建此表。

我想返回并添加每个唯一位置的学生总数。 因此，例如，“EOF/TRiO”之后的行将显示该位置的学生总数——即 2。“学习中心”的最后一行（“学生成功办公室”之前）将显示总计——71 名学生。 这有可能吗？

这就是我构建表格的方式（ajax）：

function getTablularStats(resp) {
  console.log(resp);
  var tabular = resp.msg.tabular_num_meetings;
  var cohort = resp.msg.cohort;

  var html = "";
  html += `<h5>Category: ${cohort}</h5>`;
  html += "<table class='table small table-responsible-sm table hover table-sm table-stripped'>";
  html += `<tr><th>Location</th><th>Meetings</th><th>Number of Students</th></tr>`;

  for(let key in tabular) {
    let obj = tabular[key]
    for(let innerKey in obj) {
      html += `<tr>`;
      html += `<td><b>${key}</b></td>`;
      html += `<td><b>${innerKey}</b></td>`;
      html += `<td><b>${obj[innerKey]}</b></td>`;
      html += `</tr>`;
    }
  };
  html += "</table>";
  return html;
}

JSON 格式：

"msg": {
    "num_meetings": {
      "EOF/TRiO": {
        "4 Meetings": 1,
        "11 Meetings": 1
      },
      "Learning Center": {
        "1 Meetings": 8,
        "2 Meetings": 10,
        "3 Meetings": 4,
        "4 Meetings": 9,
        "5 Meetings": 2,
        "6 Meetings": 1,
        "7 Meetings": 2,
        "8 Meetings": 1,
        "13 Meetings": 1
      },
      "Student Success Coach Office": {
        "3 Meetings": 2,
        "4 Meetings": 1
      }
    }
  }

后端：

  ...
  $stmt->execute();
  $q_result = $stmt->fetchAll(PDO::FETCH_ASSOC);


  $tabular = array();
  foreach($q_result as $r) {
    $location = $r['location'];
    $apptCount = $r['appointments'];
    $tabular[$location][$apptCount . " Meetings"] += 1;
  }

  echo json_encode(array(
    'success' => 1,
    'msg' => array(
      'cohort' => $cohort_type,
      'attendance_per_week' => $attendance_per_week,
      'num_meetings' => $occurence,
      'tabular_num_meetings' => $tabular
    )
  ));
}

感谢您的任何帮助或建议！

Answer 1

我认为下面的代码可以解决您的问题。 对于每个键，您可以在计算 html 代码时计算学生总数。 在计算完所有内部键之后，您可以添加显示总数的行。 我没有时间测试它。 但它应该可以完成这项工作。

function getTablularStats(resp) {
  console.log(resp);
  var tabular = resp.msg.tabular_num_meetings;
  var cohort = resp.msg.cohort;

  var html = "";
  html += `<h5>Category: ${cohort}</h5>`;
  html += "<table class='table small table-responsible-sm table hover table-sm table-stripped'>";
  html += `<tr><th>Location</th><th>Meetings</th><th>Number of Students</th></tr>`;

  for(let key in tabular) {
    let obj = tabular[key]
    let total = 0; // for each key you can calculate
    for(let innerKey in obj) {
      html += `<tr>`;
      html += `<td><b>${key}</b></td>`;
      html += `<td><b>${innerKey}</b></td>`;
      html += `<td><b>${obj[innerKey]}</b></td>`;
      html += `</tr>`;
      total+=obj[innerKey];//in every inner key update the total
    }
    //after you generated all rows relevant to the key
    //then you can add total row here
      html += `<tr>`;
      html += `<td><b>total for ${key}</b></td>`;
      html += `<td><b></b></td>`;
      html += `<td><b>${total}</b></td>`;
      html += `</tr>`;
  };
  html += "</table>";
  return html;
}

Answer 2

让我告诉你我从你的问题中了解到的。 对于唯一标题的每一端，您需要显示学生总数。 如果这是您的问题，那么绝对有可能。

为此，我将按如下方式重新编写 javascript：请让我知道是否有任何小错误，因为我还没有调试代码

    function getTablularStats(resp) {
    console.log(resp);
    var tabular = resp.msg.tabular_num_meetings;
    var cohort = resp.msg.cohort;

    var uniqueKey = "";
    var numberOfStudents = 0;
    var flag = 0;

    var html = "";
    html += `<h5>Category: ${cohort}</h5>`;
    html += "<table class='table small table-responsible-sm table hover table-sm table-stripped'>";
    html += `<tr><th>Location</th><th>Meetings</th><th>Number of Students</th></tr>`;

    for (let key in tabular) {

        let obj = tabular[key]
        for (let innerKey in obj) {

            if (uniqueKey != key && flag != 0) {

                // Display the total students 
                html += '<tr><td colspan="2"> Total the number of students for that location :</td><td>' + numberOfStudents + '</td>';
                // Stores the new key 
                uniqueKey = key;
                // Reset the student counter
                numberOfStudents = 0;
                // Flag 0 is set so that the total doesn't show up for the first data from json
                flag = 1;

            }
            html += `<tr>`;
            html += `<td><b>${key}</b></td>`;
            html += `<td><b>${innerKey}</b></td>`;
            html += `<td><b>${obj[innerKey]}</b></td>`;
            html += `</tr>`;
            // Titles are stored so that can be checked for unique
            uniqueKey = key;
            // Sum is calculated on the go.
            numberOfStudents += obj[innerKey];
        }
    };
    html += "</table>";
    return html;
}
enter code here