在表的特定单元格中显示JSON数据

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

我是全新的JavaScript，所以如果我听起来很愚蠢，请道歉。我试图循环JSON并在学生时间表中显示数据，我需要将数据发送到“特定单元格”。我当前给出的代码工作正常，但看起来很笨重而且微不足道。我只是想知道是否有更好更有效的方法来做这个而不是使用“if语句”的负载？非常感谢帮助

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

1 个解决方案

#1

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

这是达到同样目的的另一种方法，检查是否符合您的要求

Here is the fiddle: http://codepen.io/anon/pen/dOxyyd

这是小提琴：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>