Question

我正在尝试在表中显示“学生”数据及其SRN，firstName，surName和已分配的组。我也试图根据学生SRN从“组”数据中显示他们的教程组。

这是我的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <title>Student groups</title>
    <link rel="stylesheet" type="text/css" href="app.css">

  <script type="text/javascript" src="displayStudents.js"></script>

  <script type="text/javascript">

    var studentsListJSON ;

    function getStudentsJSON() {
      makeRequest('http://homepages.herts.ac.uk/~comqgrs/ads/moduleGroups.php?moduleCode=6com9051');
    }

    function makeRequest(url) {
      console.log("Making Request to..." + url);
      httpRequest = new XMLHttpRequest();

      if (!httpRequest) {
        console.log('Giving up. Cannot create an XMLHTTP instance');
        return false;
      }
      httpRequest.onreadystatechange = processContents;
      httpRequest.open('GET', url);
      httpRequest.send();
    }

    function processContents() {
      console.log("Call back to process contence: state = " + httpRequest.readyState + "; status = " + httpRequest.status);
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
          console.log("request returned, processing data... \n" + httpRequest.responseText);
          studentsListJSON = JSON.parse(httpRequest.responseText);
          displayStudents();
        } else {
          console.log('There was a problem with the request.');
        }
      }
    }
  </script>

</head>
<body>
<h1>Student Groups for 6COM9051: More Web Scripting</h1>

<h2>Selected Students</h2>
<p>Lets go ... <a href="javascript:getStudentsJSON()">display the Students!</a></p>

<div id="studentsList"></div>
</body>
</html>

这是我的JS档案：

function displayStudents() {
    var studentsListHTML = '<table id="studentsTable"><thead><tr><th>SRN</th><th>Firstname</th><th>Lastname</th><th>Allocated Group</th></tr></thead>'
    for (var studentsName = '"students"' in studentsListJSON) {

    var students = studentsListJSON[studentsName];

    var studentHTML = '<tr><td>' + students.SRN + '</td><td>' + students.firstName + '</td><td>' + students.lastName + '</td><td>' + students.allocatedGroup + '</td></tr>';

    studentsListHTML += studentHTML;
}

studentsListHTML += '</table>';
document.getElementById('studentsList').innerHTML=studentsListHTML;
}

我需要将数据放在表格中，因为用户在浏览器上打开页面并有一个搜索栏，以便用户可以搜索表格中显示的任何数据。

Answer 1

尝试将displayStudents（）方法更改为：

function displayStudents() {
        var studentsListHTML = '<table id="studentsTable"><thead><tr><th>SRN</th><th>Firstname</th><th>Lastname</th><th>Allocated Group</th></tr></thead>'
        for (var studentSRN in studentsListJSON.students) {

        var student = studentsListJSON.students[studentSRN];

        var studentHTML = '<tr><td>' + studentSRN + '</td><td>' + student.firstName + '</td><td>' + student.lastName + '</td><td>' + student.allocatedGroup + '</td></tr>';

        studentsListHTML += studentHTML;
        }

        studentsListHTML += '</table>';
        document.getElementById('studentsList').innerHTML=studentsListHTML;
    }

注意第（第5行） - var student = studentsListJSON.students[studentSRN];

您需要使用studenSRN作为密钥来访问Student字典中的相应studentsListJSON.students。

如何从JSON URL提取数据？

1 个答案: