having trouble displaying javascript array

Question

I hava php file that reads in csv file

`<?php
$csv = array_map('str_getcsv', file('../data/file.csv'));
array_walk($csv, function(&$a) use ($csv) {
    $a = array_combine($csv[0], $a);
});
array_shift($csv); # remove column header
header('Content-Type: application/json');
echo json_encode($csv);
?>`

I have js file that displays first name,last name and a button in the table. this works. Than when i click the button it should pass the values to another page. It only works with the first name and the last name. When i try to pass other values from data file the table does not display. I need to be able to pass all the values in data file to a new php file What am I doing wrong? Is there a simpler way to do this? Thank you I really appreciate your help.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    var file = JSON.parse(xhr.responseText);
    var statusHTML = '<tr>';

    for (var i = 0; i < file.length; i += 1) {
      statusHTML += '<td>';
      statusHTML += file[i].FirstName;
      statusHTML += '</td>';
      statusHTML += '<td>';
      statusHTML += file[i].LastName;
      statusHTML += '</td>';
      statusHTML += '<td>';
      statusHTML +='<form name="classesDisplay"role="form"  action="planer.php" method="post">';
      statusHTML +='<input type="hidden" name="firstname" value="'+file[i].FirstName+'">';
      statusHTML +='<input type="hidden" name="lastname" value="'+file[i].LastName+'">';
      //statusHTML +='<input type="hidden" name="calc1" value="'+file[i].MAT251-Calc-I +'">';

       statusHTML +='<button type="submit" class="btn btn-sm btn-success myButton">';
       statusHTML += '<span class="glyphicon glyphicon-eye-open"></span>';
       statusHTML +=' progress</button>'; 

      statusHTML +='</form>';      
      statusHTML += '</td>';
      statusHTML += '</tr>';



    }
    document.getElementById('studentList').innerHTML = statusHTML;
  }
};
xhr.open('GET', 'data/file.php');
xhr.send();

samle data

[
  {
    "LastName": "Rocha",
    "FirstName": "Cara I.",
    "MAT251-Calc-I": "A",
    "MAT252-Calc-II": 0,
    "MAT320-DiscreteMath": 0,
    "CPS210-CompSci-I": "C-",
    "CPS310-CompSci-II": 0,
    "CPS315-CompSci-III": 0,
    "CPS352-OOP": 0,
    "CPS330-Assembly.Arch.": 0,
    "CPS353-SoftEng": 0,
    "CPS415-Disc.Cont.Algorithms": 0,
    "CPS340-Op.Sys": 0,
    "CPS425-Lang.Processing": 0,
    "CPS493-Elect-1": 0,
    "CPS493-Projects": 0,
    "EGC230-Dig.Logic": 0,
    "EGC208-Dig.Logic.Lab": 0,
    "SCIENCE-I": 0,
    "SCIENCE-II": 0
  },
  {
    "LastName": "Hamilton",
    "FirstName": "Mufutau N.",
    "MAT251-Calc-I": 0,
    "MAT252-Calc-II": 0,
    "MAT320-DiscreteMath": 0,
    "CPS210-CompSci-I": "A-",
    "CPS310-CompSci-II": 0,
    "CPS315-CompSci-III": 0,
    "CPS352-OOP": 0,
    "CPS330-Assembly.Arch.": 0,
    "CPS353-SoftEng": 0,
    "CPS415-Disc.Cont.Algorithms": 0,
    "CPS340-Op.Sys": 0,
    "CPS425-Lang.Processing": 0,
    "CPS493-Elect-1": 0,
    "CPS493-Projects": 0,
    "EGC230-Dig.Logic": 0,
    "EGC208-Dig.Logic.Lab": 0,
    "SCIENCE-I": 0,
    "SCIENCE-II": 0
  },

Answer 1

You are only creating one starting <tr> for all rows but closing each row properly

Change

var statusHTML = '<tr>';
for (var i = 0; i < file.length; i += 1) {

To

var statusHTML = '';
for (var i = 0; i < file.length; i += 1) {
  statusHTML  += '<tr>'; // start new row each iteration of loop

For property names with special characters like file[i].MAT251-Calc-I you need to use [] notation:

file[i]['MAT251-Calc-I']