How to add data to a table generated from JSON data?

[miraclefruit]

Hello,

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!

[m3g4p0p]

@miraclefruit

I want to go back and add in the total number of students per unique location

Hi @miraclefruit, you can use the reduce() Array method to add the Object.values() like so:

for (const key in tabular) {
  const obj = tabular[key]
  const totalStudents = Object.values(obj).reduce((a, b) => a + b)

  for (const innerKey in obj) {
    html += `<tr>`
    html += `<td><b>${key}</b></td>`
    html += `<td><b>${innerKey}</b></td>`
    html += `<td><b>${obj[innerKey]} / ${totalStudents}</b></td>`
    html += `</tr>`
  }
}

If you’re not interested in listing the separate meetings, just omit the inner for loop.

[miraclefruit]

Thank you! This was really helpful. I attempted an another method if anyone comes across something similar to:

for(let key in tabular) {
    let obj = tabular[key];
    let total = 0;

    for(let innerKey in obj) {
      var count = obj[innerKey];
      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];
    }
    console.log(total);
    html += `<tr class='alert alert-secondary'>`;
    html += `<td><b>&nbsp&nbsp Total (${key})</b></td>`;
    html += `<td><b></b></td>`;
    html += `<td><b>${total}</b></td>`;
    html += `</tr>`;
  };
  html += "</table>";
  return html;