无法显示javascript数组

时间:2016-02-27 22:05:50

标签: javascript php ajax csv

我hava php文件读取csv文件

`<?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);
?>`

我有js文件,显示表中的名字,姓氏和按钮。这很有效。比我点击按钮时,它应该将值传递给另一个页面。它只适用于名字和姓氏。当我尝试从数据文件传递其他值时,表不会显示。我需要能够将数据文件中的所有值传递给新的php文件我做错了什么?有更简单的方法吗?谢谢,我真的很感谢你的帮助。

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数据

[
  {
    "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
  },

1 个答案:

答案 0 :(得分:0)

您只为所有行创建一个起始<tr>,但正确关闭每一行

更改

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

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

对于包含file[i].MAT251-Calc-I等特殊字符的属性名称,您需要使用[]表示法:

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