Displaying JSON data in particular cells of a table

Question

I am totally new to JavaScript so apologies if I sound stupid. I am trying to loop over JSON and display data in a student timetable for which I need to send data to "particular cells". My current code given works just fine but looks a lot clunky and trivial. I just want to know if there is a better and efficient way of doing this instead of using loads of "if statements"? Help would be much appreciated

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;
                }
            }
        }
    }
};

Answer 1

This is another way to achieve the same, check if suits your requirements

Here is the fiddle: 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>