Is it possible to alter a table generated from JSON data by adding in manual data?

I am building this Table through json data fed in from a php script.

I want to go back and add in the total number of students per unique location. So for example, the row after “EOF/TRiO” will total the number of students for that location – which is 2. And the final row of “Learning Center” (before ‘Student Success Office’) will read Total – 71 students. Is this possible to do so?

This is how I am building my table (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 format:

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

Backend:

  ...
  $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
    )
  ));
}

Thank you for any help or suggestions!

Answer

I think the below code can solve your problem. For each key you can calculate the total numbers of students while computing the html code. And after you calculated all the inner keys then you can add the row that shows total numbers. I didn’t have time to test it. But it should do the job.

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