如何在显示所有值的表中以HTML格式显示此JSON数据?

时间:2017-12-30 21:38:14

标签: javascript html arrays json

我正在尝试以表格格式显示此代码,但我无法让学生的对象显示其中的所有信息,我想知道每个学生ID的数组的对象组是否为能够显示信息吗?

var moduleListJSON =
{
"code" : "4COM9051",
"name" : "More Web Scripting",
"cohort" : "IT/JH/ITMB",

"students" : {
    "97xx08xx01": {"firstName": "Jo 1", "lastName": "Bloggs", 
    "allocatedGroup": "690511"},
    "97xx08xx03": {"firstName": "Jo 2", "lastName": "Bloggs", 
    "allocatedGroup": "690511"},
    "97xx08xx02": {"firstName": "Jo 3", "lastName": "Bloggs", 
    "allocatedGroup": "690513"},
    "97xx08xx06": {"firstName": "Joe 1", "lastName": "Bliggs", 
    "allocatedGroup": "690513"},
    "97xx08xx05": {"firstName": "Joe 2", "lastName": "Bliggs", 
    "allocatedGroup": "690511"},
    "97xx08xx04": {"firstName": "Joe 3", "lastName": "Bliggs", 
    "allocatedGroup": "690513"},
},

"groups" : {
    "690511": {
        "name": "Tutorial 1",
        "members" : ["97xx08xx01", "97xx08xx05", "97xx08xx03"]
},
    "690513": {
        "name": "Tutorial 2",
        "members" : ["97xx08xx04", "97xx08xx02", "97xx08xx06"]
}
}

}

这是我设法在一个只有对象的表中显示的JSON,但是,由于这个原因,我无法完成单独的任务:

HTML       

function displayParks() {
    console.log('displaying parks header...')
    var parksListHTML = '<table id="parksTable"><thead><tr><th>Student SRN</th><th>First Name</th><th>Last Name</th><th>Group Allocated</th></tr></thead>'
    for (var parkName in parksListJSON) {
    // store local reference to park being displayed 
        var park = parksListJSON[parkName];
        console.log('  displaying ' + park.displayName);

    // generate HTML table row for park
        var parkHTML = '<tr id="' + parkName + '"><td>' + park.studentSRN + '</td><td>' + park.firstName + '</td><td>' + park.lastName + '</td><td>' + park.allocatedGroup + '</td></tr>' ;
    // console.log('  ' + parkHTML);
    parksListHTML += parkHTML;

    }
    parksListHTML += '</table>';
    console.log('  ' + parksListHTML);
    document.getElementById("parksList").innerHTML=parksListHTML;
}   

JSON

var parksListJSON =
{

"StudentOne" :
  {
       "studentSRN": "97xx08xx01", 
       "firstName": "Jo 1",
       "lastName": "Bloggs", 
       "allocatedGroup": "690511"
  },

  "StudentTwo" :
    {
      "studentSRN": "97xx08xx03",
      "firstName": "Jo 2", 
      "lastName": "Bloggs", 
      "allocatedGroup": "690511"
    },

"StudentThree" :
    {
      "studentSRN": "97xx08xx02",
      "firstName": "Jo 3", 
      "lastName": "Bloggs", 
      "allocatedGroup": "690513"
    },

"StudentFour" :
    {
      "studentSRN": "97xx08xx06",
      "firstName": "Joe 1", 
      "lastName": "Bliggs",
      "allocatedGroup": "690513"
    },

"StudentFive" :
    {
      "studentSRN": "97xx08xx05",
      "firstName": "Joe 2", 
      "lastName": "Bliggs", 
      "allocatedGroup": "690511"
    },


"StudentSix" :
    {
      "studentSRN": "97xx08xx07",
      "firstName": "Joe 4", 
      "lastName": "Blaggs", 
      "allocatedGroup": "690511"
    },

"StudentSeven" : 
    {
       "studentSRN": "97xx08xx04",
       "firstName": "Jo 3",
       "lastName": "Bliggs", 
       "allocatedGroup": "690513"
    }
  }
;

0 个答案:

没有答案