在表格的特定單元格中顯示JSON數據

我完全不熟悉JavaScript，所以如果我聽起來很愚蠢，我很抱歉。我試圖循環瀏覽JSON並在學生時間表中顯示數據，我需要將數據發送到「特定單元格」。我現在的代碼工作得很好，但看起來很笨重和微不足道。我只想知道是否有更好和有效的方式來做這件事，而不是使用大量的「if語句」？幫助會非常讚賞在表格的特定單元格中顯示JSON數據

function displayJSON() { 
    for (var parkName in parksListJSON) { 
     var park = parksListJSON[parkName]; 
     console.log(park); 
    } 

    var schedule = parksListJSON.schedule; 

    for (var i = 0; i < schedule.length; i++){ 
     var schedule = parksListJSON.schedule; 
     var moduleCode = schedule[i].module; 
     var session = schedule[i].sessionType; 

     if (!parksListJSON.schedule[i].allocatedTime) { 
      var lecCode = schedule[i].module; 
      var type = schedule[i].sessionType; 
      var lecLocation = schedule[i].location; 
      var fred = ('<td class="something"> ' + lecCode + ',<br> ' + type + '<br> ' + lecLocation + ' ' + '</td>'); 

      if (moduleCode == "uh6com1051"){ 
       document.querySelector("#thurs .s15").innerHTML=fred 
      } 

      if (moduleCode == "uh6com1099"){ 
       document.querySelector("#fri .s12").innerHTML=fred 
      } 

      if (moduleCode == "uh6com1063"){ 
       document.querySelector("#tues .s12").innerHTML=fred 
      } 
     }else 
     { 
      var groupName = schedule[i].allocatedTime.group; 
      var locations=schedule[i].allocatedTime.location; 
      var array = [moduleCode,session,locations,groupName]; 
      var fred = ('<td class="something"> ' + array[0] +',<br> '+ array[1]+',<br> ' + array[2] +', ' + array[3] + ' ' + '</td>'); 

      if (moduleCode == "uh6com1051"){ 
       if (session == "tutorial"){ 
        document.querySelector("#weds .s9").innerHTML=fred; 
       } 
      } 
      if (moduleCode == "uh6com1051"){ 
       if (session == "lab"){ 
        document.querySelector("#mon .s11").innerHTML=fred; 
       } 
      } 
      if (moduleCode == "uh6com1063"){ 
       if (session == "lab"){ 
        document.querySelector("#tues .s11").innerHTML=fred; 
       } 
      } 
      if (moduleCode == "uh6com1063"){ 
       if (session == "tutorial"){ 
        document.querySelector("#mon .s13").innerHTML=fred; 
       } 
      } 
      if (moduleCode == "uh6com1099"){ 
       if (session == "tutorial"){  
        document.querySelector("#weds .s11").innerHTML=fred; 
       } 
      } 
     } 
    } 
};

來源

2016-12-27 Kaleem Shahid

燦你展示JSON？或更好的工作[小提琴]（https://jsfiddle.net/）？ –

爲什麼不使用'switch'而不是'if'？ – RaR

這裏是小提琴的鏈接[https://jsfiddle.net/KaleemShahid/u5mtq1ef/] @FlyingGambit –

這是另一種方式來達到同樣的，檢查是否符合您要求的

這裏是小提琴：http://codepen.io/anon/pen/dOxyyd

var parksListJSON = { 
 
    "for": "abcde", 
 
    "srn": "12345678", 
 
    "cohort": "CS/IT/JH6", 
 
    "modules": { 
 
     "uh6com1051": { 
 
      "name": "Scripting" 
 
     }, 
 
     "uh6com1063": { 
 
      "name": "UX" 
 
     }, 
 
     "uh6com1099": { 
 
      "name": "Project" 
 
     } 
 
    }, 
 
    "schedule": [{ 
 
     "module": "uh6com1051", 
 
     "sessionType": "lab", 
 
     "duration": 1, 
 
     "allocatedTime": { 
 
      "group": "A", 
 
      "day": "mon", 
 
      "location": "E406", 
 
      "time": "11" 
 
     }, 
 
     "alternativeTimes": [{ 
 
      "group": "B", 
 
      "day": "tues", 
 
      "location": "E150", 
 
      "time": "11" 
 
     }] 
 
    }, { 
 
     "module": "uh6com1051", 
 
     "sessionType": "tutorial", 
 
     "duration": 1, 
 
     "allocatedTime": { 
 
      "group": "A", 
 
      "day": "weds", 
 
      "location": "C402", 
 
      "time": "9" 
 
     }, 
 
     "alternativeTimes": [{ 
 
      "group": "B", 
 
      "day": "thurs", 
 
      "location": "C402", 
 
      "time": "9" 
 
     }] 
 
    }, { 
 
     "module": "uh6com1051", 
 
     "sessionType": "lecture", 
 
     "duration": 1, 
 
     "day": "thurs", 
 
     "location": "B400", 
 
     "time": "15" 
 
    }, { 
 
     "module": "uh6com1063", 
 
     "sessionType": "lab", 
 
     "duration": 1, 
 
     "allocatedTime": { 
 
      "group": "A", 
 
      "day": "tues", 
 
      "location": "E407", 
 
      "time": "11" 
 
     }, 
 
     "alternativeTimes": [{ 
 
      "group": "B", 
 
      "day": "weds", 
 
      "location": "E150", 
 
      "time": "9" 
 
     }, { 
 
      "group": "C", 
 
      "day": "thurs", 
 
      "location": "E150", 
 
      "time": "11" 
 
     }] 
 
    }, { 
 
     "module": "uh6com1063", 
 
     "sessionType": "tutorial", 
 
     "duration": 1, 
 
     "allocatedTime": { 
 
      "group": "A", 
 
      "day": "mon", 
 
      "location": "C402", 
 
      "time": "13" 
 
     }, 
 
     "alternativeTimes": [{ 
 
      "group": "B", 
 
      "day": "thurs", 
 
      "location": "C400", 
 
      "time": "9" 
 
     }, { 
 
      "group": "C", 
 
      "day": "fri", 
 
      "location": "C400", 
 
      "time": "9" 
 
     }] 
 
    }, { 
 
     "module": "uh6com1063", 
 
     "sessionType": "lecture", 
 
     "duration": 1, 
 
     "day": "tues", 
 
     "location": "A166", 
 
     "time": "12" 
 
    }, { 
 
     "module": "uh6com1099", 
 
     "sessionType": "tutorial", 
 
     "duration": 1, 
 
     "allocatedTime": { 
 
      "group": "D", 
 
      "day": "weds", 
 
      "location": "LB252", 
 
      "time": "11" 
 
     }, 
 
     "alternativeTimes": [{ 
 
      "group": "A", 
 
      "day": "mon", 
 
      "location": "LB252", 
 
      "time": "13" 
 
     }, { 
 
      "group": "B", 
 
      "day": "mon", 
 
      "location": "LB252", 
 
      "time": "16" 
 
     }, { 
 
      "group": "C", 
 
      "day": "tues", 
 
      "location": "LB252", 
 
      "time": "11" 
 
     }, { 
 
      "group": "E", 
 
      "day": "thurs", 
 
      "location": "LB252", 
 
      "time": "11" 
 
     }] 
 
    }, { 
 
     "module": "uh6com1099", 
 
     "sessionType": "lecture", 
 
     "duration": 1, 
 
     "day": "fri", 
 
     "location": "A161", 
 
     "time": "12" 
 
    }] 
 
} 
 

 
function displaySchedule(schedule) { 
 
    var scheduleElement = document.getElementsByClassName("schedule"); 
 
    for (var i = 0; i < schedule.length; ++i) { 
 
     var cellElement; 
 
     if (schedule[i].hasOwnProperty("allocatedTime")) { 
 
      var allocatedTime = schedule[i].allocatedTime; 
 
      cellElement = document.querySelector("." + allocatedTime.day + " .s" + allocatedTime.time); 
 
      cellElement.innerHTML = getModuleText(schedule[i], allocatedTime); 
 
     } 
 
     if (schedule[i].hasOwnProperty("alternativeTimes")) { 
 
      for (var j = 0; j < schedule[i].alternativeTimes.length; ++j) { 
 
       var alternativeTime = schedule[i].alternativeTimes[j]; 
 
       cellElement = document.querySelector("." + alternativeTime.day + " .s" + alternativeTime.time); 
 
       if (cellElement.innerHTML.length > 0) { 
 
        cellElement.innerHTML += "<br>"; 
 
       } 
 
       cellElement.innerHTML += getModuleText(schedule[i], alternativeTime); 
 
      } 
 
     } 
 
    } 
 
} 
 

 
// Helper function 
 
function getModuleText(schedule, scheduleTime) { 
 
    var text = "<div class='module'>" + 
 
     "<span class='title'>Mod: </span>" + schedule.module + "<br>" + 
 
     "<span class='title'>Type: </span>" + schedule.sessionType + "<br>" + 
 
     "<span class='title'>Loc: </span>" + scheduleTime.location + "<br>" + 
 
     "<span class='title'>Group: </span>" + scheduleTime.group + 
 
     "</div>"; 
 
    return text; 
 
} 
 

 
displaySchedule(parksListJSON.schedule);

/* Styles used from http://www.w3schools.com/css/css_table.asp . Check that link for info */ 
 

 
table.schedule { 
 
    border-collapse: collapse; 
 
    font-family: "Segoe UI", Arial, sans-serif; 
 
} 
 

 
.schedule th { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 
.schedule th, .schedule td { 
 
    padding: 25px; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
.schedule tr:hover { 
 
    background-color: #f5f5f5 
 
} 
 

 
.schedule tr:nth-child(even) { 
 
    background-color: #f2f2f2 
 
} 
 

 
.schedule .dayRowHead, .schedule .title{ 
 
    font-weight: 500; 
 
} 
 

 
.schedule .module{ 
 
    border: 1px solid #ddd; 
 
    padding: 10px; 
 
}

<!-- Changed id to class --> 
 

 
<table class='schedule'> 
 
    <thead> 
 
     <!-- Row 0--> 
 
     <tr> 
 
      <th>Day</th> 
 
      <th>09:00</th> 
 
      <th>10:00</th> 
 
      <th>11:00</th> 
 
      <th>12:00</th> 
 
      <th>13:00</th> 
 
      <th>14:00</th> 
 
      <th>15:00</th> 
 
      <th>16:00</th> 
 
      <th>17:00</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <!-- Row 1--> 
 
     <tr class="mon"> 
 
      <td class="dayRowHead">Mon</td> 
 
      <td class="s9"></td> 
 
      <td class="s10"></td> 
 
      <td class="s11"></td> 
 
      <td class="s12"></td> 
 
      <td class="s13"></td> 
 
      <td class="s14"></td> 
 
      <td class="s15"></td> 
 
      <td class="s16"></td> 
 
      <td class="s17"></td> 
 
     </tr> 
 
     <!-- Row 2--> 
 
     <tr class="tues"> 
 
      <td class="dayRowHead">Tue</td> 
 
      <td class="s9"></td> 
 
      <td class="s10"></td> 
 
      <td class="s11"></td> 
 
      <td class="s12"></td> 
 
      <td class="s13"></td> 
 
      <td class="s14"></td> 
 
      <td class="s15"></td> 
 
      <td class="s16"></td> 
 
      <td class="s17"></td> 
 
     </tr> 
 
     <!-- Row 3--> 
 
     <tr class="weds"> 
 
      <td class="dayRowHead">Wed</td> 
 
      <td class="s9"></td> 
 
      <td class="s10"></td> 
 
      <td class="s11"></td> 
 
      <td class="s12"></td> 
 
      <td class="s13"></td> 
 
      <td class="s14"></td> 
 
      <td class="s15"></td> 
 
      <td class="s16"></td> 
 
      <td class="s17"></td> 
 
     </tr> 
 
     <!-- Row 3--> 
 
     <tr class="thurs"> 
 
      <td class="dayRowHead">Thu</td> 
 
      <td class="s9"></td> 
 
      <td class="s10"></td> 
 
      <td class="s11"></td> 
 
      <td class="s12"></td> 
 
      <td class="s13"></td> 
 
      <td class="s14"></td> 
 
      <td class="s15"></td> 
 
      <td class="s16"></td> 
 
      <td class="s17"></td> 
 
     </tr> 
 
     <!-- Row 4--> 
 
     <tr class="fri"> 
 
      <td class="dayRowHead">Fri</td> 
 
      <td class="s9"></td> 
 
      <td class="s10"></td> 
 
      <td class="s11"></td> 
 
      <td class="s12"></td> 
 
      <td class="s13"></td> 
 
      <td class="s14"></td> 
 
      <td class="s15"></td> 
 
      <td class="s16"></td> 
 
      <td class="s17"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

來源

2016-12-28 18:06:58

這絕對是我一直在尋找的東西，這幫助我學到了很多東西，萬分感謝@Flying Gambit –

在表格的特定單元格中顯示JSON數據

回答

相關問題