2016-11-28 109 views
1

此代碼應該:找到匹配所選按鈕的日期(例如,星期一)的對象課程,然後;根據開始時間對列表進行排序。由於對象中信息的性質,我將它們轉換爲軍事等值用於比較目的。一旦完成後,它應該最終顯示具有在聲明中指定的信息的已排序課程列表。JSON/JavaScript功能/實現

但是,當我選擇一個按鈕時,什麼也沒有發生。沒有顯示任何內容,編譯時也不會在代碼中發現任何錯誤。

var courses = [ 
    { 
    "dept": "CSC", 
    "id": "3102", 
    "instructor": "Kooima", 
    "Location": "230 Turead", 
    "Start_Time": "1130", 
    "End_Time": "1230", 
    "Attendance": "Tuesday", 
    "Full_Name": "Advanced Data Structures and Algorithm Analysis" 
    }, 
    { 
    "dept": "CSC", 
    "id": "1200", 
    "instructor": "Duncan", 
    "Location": "420 PFT", 
    "Start_Time": "1030", 
    "End_Time": "1130", 
    "Attendance": "Monday", 
    "Full_Name": "Ethics in Computer Science" 
    }, 
    { 
    "dept": "CSC", 
    "id": "4330", 
    "instructor": "Mahmoud", 
    "Location": "150 Coates", 
    "Start_Time": "12:30", 
    "End_Time": "1:30", 
    "Attendance": "Thursday", 
    "Full_Name": "Software Systems Development" 
    }, 
    { 
    "dept": "MATH", 
    "id": "1550", 
    "instructor": "Tom", 
    "Location": "012 Lockett", 
    "Start_Time": "12:30", 
    "End_Time": "1:30", 
    "Attendance": "Wednesday", 
    "Full_Name": "Calculus" 
    }, 
    { 
    "dept": "ENGL", 
    "id": "2000", 
    "instructor": "McKinnon", 
    "Location": "012 Allen Hall", 
    "Start_Time": "9:30", 
    "End_Time": "10:30", 
    "Attendance": "Friday", 
    "Full_Name": "English Composition" 
    }, 
    { 
    "dept": "THTR", 
    "id": "1020", 
    "instructor": "King", 
    "Location": "619 MDMA", 
    "Start_Time": "8:30", 
    "End_Time": "9:30", 
    "Attendance": "Wednesday", 
    "Full_Name": "Introduction to Theatre" 
    } 

]; 

var courseDayList = new Array(); 

function converTime(time) { 
    var numericTime = 0; 
    if (time == "8:30") numericTime = 830; 
    if (time == "9:30") numericTime = 930; 
    if (time == "10:30") numericTime = 1030; 
    if (time == "11:30") numericTime = 1130; 
    if (time == "12:30") numericTime = 1230; 
    return numericTime; 
} 

function showCourseFromDay(day) { 
    var i; 
    for (i = 0; i<courses.length; i++) { 
    var course = courses[i]; 
    console.log(course); 
    if (course.Attendance == day) { 
     courseDayList.push(course); 
    } 
    } 
    courseDayList.bubbleSort = new function() { 
    var swapped; 
    do { 
     swapped = false; 
     for (var i = 0; i < courseDayList.length - 1; i++) { 
     var time1 = convertTime(courseDayList[i].Start_Time); 
     var time2 = convertTime(courseDayList[i + 1].Start_Time); 
     if (time1 > time2) { 
      var temp = courseDayList[i]; 
      courseDayList[i] = courseDayList[i + 1]; 
      courseDayList[i + 1] = temp; 
      swapped = true; 
     } 
     } 
    } while (swapped); 
    } 
    courseDayList.bubbleSort(); 
    courseDayList.printCourses = new function() { 
    var counter = 0; 
    while (counter == courseDayList.length) { 
     var courseName = document.getElementById("cName"); 
     var courseTime = document.getElementById("cTime"); 
     var courseLocation = document.getElementById("cLocation"); 
     courseName.innerHTML = courseDayList[counter].dept + " " + courseDayList[counter].id + "- " + courseDayList[counter].Full_Name + "<br />"; 
     courseTime.innerHTML = courseDayList[counter].Start_Time + "-" + courseDayList[counter].End_Time + "<br />"; 
     courseLocation.innerHTML = courseDayList[counter].Location; 
     counter++; 
    } 
    } 
    courseDayList.printCourses(); 
} 


<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4>Today's Schedule</h4> 
     <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Monday')">Monday</button> 
     <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Tuesday')">Tuesday</button> 
     <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Wednesday')">Wednesday</button> 
     <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Thursday')">Thursday</button> 
     <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Friday')">Friday</button> 
    </div> 
    <div class="panel-body"> 
     <div style="border-color:rebeccapurple"></div> 
     <ul class="list-group" ng-repeat="course in schedule"> 
      <li class="list-group-item"> 
       <h4 id="cName"></h4> 
       <p id="cTime"></p> 
       <p id="cLocation"></p> 
      </li> 
     </ul> 
    </div> 
</div> 
+1

什麼問題:由於計數器LD從未運行(始終爲0)正在對名單(永遠不爲0)

這裏是爲您小提琴的大小測試?有錯誤嗎?如果是這樣,那麼錯誤信息是什麼?代碼是否不像您期望的那樣行事?如果是這樣,會發生什麼?你期望會發生什麼? – Asaph

+0

對不起,不包含該信息。在理想情況下,代碼應該:從JSON對象中找到匹配所選按鈕的一天(例如,星期一)的課程,然後;根據開始時間對列表進行排序。由於JSON對象中信息的性質,我將它們轉換爲其軍事等價物用於比較目的。一旦完成後,它應該最終顯示具有在聲明中指定的信息的已排序課程列表。我一直在嘗試使用準備運行onclick函數的準系統HTML頁面上的按鈕來測試它,但它似乎不起作用。 –

+0

請在您的問題中更新此問題 – Aruna

回答

1
var courses = [ 
    { 
    "dept": "CSC", 
    "id": "3102", 
    "instructor": "Kooima", 
    "Location": "230 Turead", 
    "Start_Time": "1130", 
    "End_Time": "1230", 
    "Attendance": "Tuesday", 
    "Full_Name": "Advanced Data Structures and Algorithm Analysis" 
    }, 
    { 
    "dept": "CSC", 
    "id": "1200", 
    "instructor": "Duncan", 
    "Location": "420 PFT", 
    "Start_Time": "1030", 
    "End_Time": "1130", 
    "Attendance": "Monday", 
    "Full_Name": "Ethics in Computer Science" 
    }, 
    { 
    "dept": "CSC", 
    "id": "4330", 
    "instructor": "Mahmoud", 
    "Location": "150 Coates", 
    "Start_Time": "12:30", 
    "End_Time": "1:30", 
    "Attendance": "Thursday", 
    "Full_Name": "Software Systems Development" 
    }, 
    { 
    "dept": "MATH", 
    "id": "1550", 
    "instructor": "Tom", 
    "Location": "012 Lockett", 
    "Start_Time": "12:30", 
    "End_Time": "1:30", 
    "Attendance": "Wednesday", 
    "Full_Name": "Calculus" 
    }, 
    { 
    "dept": "ENGL", 
    "id": "2000", 
    "instructor": "McKinnon", 
    "Location": "012 Allen Hall", 
    "Start_Time": "9:30", 
    "End_Time": "10:30", 
    "Attendance": "Friday", 
    "Full_Name": "English Composition" 
    }, 
    { 
    "dept": "THTR", 
    "id": "1020", 
    "instructor": "King", 
    "Location": "619 MDMA", 
    "Start_Time": "8:30", 
    "End_Time": "9:30", 
    "Attendance": "Wednesday", 
    "Full_Name": "Introduction to Theatre" 
    } 

]; 

var courseDayList = new []; 

function convertTime(time) { 
    var numericTime = 0; 
    if (time == "8:30") numericTime = 830; 
    if (time == "9:30") numericTime = 930; 
    if (time == "10:30") numericTime = 1030; 
    if (time == "11:30") numericTime = 1130; 
    if (time == "12:30") numericTime = 1230; 
    return numericTime; 
} 

function showCourseFromDay(day) { 
    var i; 
    for (i = 0; i<courses.length; i++) { 
    var course = courses[i]; 
    console.log(course); 
    if (course.Attendance == day) { 
     courseDayList.push(course); 
    } 
    } 
    courseDayList.bubbleSort = function() { 
    var swapped; 
    do { 
     swapped = false; 
     for (var i = 0; i < courseDayList.length - 1; i++) { 
     var time1 = convertTime(courseDayList[i].Start_Time); 
     var time2 = convertTime(courseDayList[i + 1].Start_Time); 
     if (time1 > time2) { 
      var temp = courseDayList[i]; 
      courseDayList[i] = courseDayList[i + 1]; 
      courseDayList[i + 1] = temp; 
      swapped = true; 
     } 
     } 
    } while (swapped); 
    } 
    courseDayList.bubbleSort(); 
    courseDayList.printCourses = function() { 
    var counter = 0; 
    while (counter == courseDayList.length) { 
     var courseName = document.getElementById("cName"); 
     var courseTime = document.getElementById("cTime"); 
     var courseLocation = document.getElementById("cLocation"); 
     courseName.innerHTML = courseDayList[counter].dept + " " + courseDayList[counter].id + "- " + courseDayList[counter].Full_Name + "<br />"; 
     courseTime.innerHTML = courseDayList[counter].Start_Time + "-" + courseDayList[counter].End_Time + "<br />"; 
     courseLocation.innerHTML = courseDayList[counter].Location; 
     counter++; 
    } 
    } 
    courseDayList.printCourses(); 
} 

測試,如果這個工程。一些更正:

  1. 某些功能拼錯了。
  2. 語法創建一個函數就是function() {...new function() {...
+0

無法對其進行測試,我似乎無法找到調用該函數進行測試的方法。有什麼建議麼? –

+0

快速測試:將其粘貼到頁面上的腳本標記中,並刪除腳本的任何先前版本以防止名稱衝突(舊版本覆蓋新版本)。此外,請確保您已加載Angular.js(https://angularjs.org/以獲取更多信息),因爲您在HTML中具有'ng-repeat'。 –

1

有幾個問題...

1)convertTime功能被拼錯
2)嵌套函數(printCourses和冒泡應該是在全球範圍內移出)
3)HTML中的列表結構只能支持單個輸出
4)該陣列從未被清除
5)printCourses函數wou

https://jsfiddle.net/jecfkoy7/

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h4>Today's Schedule</h4> 
    <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Monday')">Monday</button> 
    <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Tuesday')">Tuesday</button> 
    <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Wednesday')">Wednesday</button> 
    <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Thursday')">Thursday</button> 
    <button class="btn btn-default" type="submit" onclick="showCourseFromDay('Friday')">Friday</button> 
    </div> 
    <div class="panel-body"> 
    <div style="border-color:rebeccapurple"></div> 
    <ul id="list" class="list-group" ng-repeat="course in schedule"> 
     <!--<li class="list-group-item"> 
     <h4 id="cName"></h4> 
     <p id="cTime"></p> 
     <p id="cLocation"></p> 
     </li>--> 
    </ul> 
    </div> 
</div> 

var courses = [{ 
    "dept": "CSC", 
    "id": "3102", 
    "instructor": "Kooima", 
    "Location": "230 Turead", 
    "Start_Time": "1130", 
    "End_Time": "1230", 
    "Attendance": "Tuesday", 
    "Full_Name": "Advanced Data Structures and Algorithm Analysis" 
    }, { 
    "dept": "CSC", 
    "id": "1200", 
    "instructor": "Duncan", 
    "Location": "420 PFT", 
    "Start_Time": "1030", 
    "End_Time": "1130", 
    "Attendance": "Monday", 
    "Full_Name": "Ethics in Computer Science" 
    }, { 
    "dept": "CSC", 
    "id": "4330", 
    "instructor": "Mahmoud", 
    "Location": "150 Coates", 
    "Start_Time": "12:30", 
    "End_Time": "1:30", 
    "Attendance": "Thursday", 
    "Full_Name": "Software Systems Development" 
    }, { 
    "dept": "MATH", 
    "id": "1550", 
    "instructor": "Tom", 
    "Location": "012 Lockett", 
    "Start_Time": "12:30", 
    "End_Time": "1:30", 
    "Attendance": "Wednesday", 
    "Full_Name": "Calculus" 
    }, { 
    "dept": "ENGL", 
    "id": "2000", 
    "instructor": "McKinnon", 
    "Location": "012 Allen Hall", 
    "Start_Time": "9:30", 
    "End_Time": "10:30", 
    "Attendance": "Friday", 
    "Full_Name": "English Composition" 
    }, { 
    "dept": "THTR", 
    "id": "1020", 
    "instructor": "King", 
    "Location": "619 MDMA", 
    "Start_Time": "8:30", 
    "End_Time": "9:30", 
    "Attendance": "Wednesday", 
    "Full_Name": "Introduction to Theatre" 
    } 

]; 

var courseDayList = new Array(); 

convertTime = function(time) { 
    var numericTime = 0; 
    if (time == "8:30") numericTime = 830; 
    if (time == "9:30") numericTime = 930; 
    if (time == "10:30") numericTime = 1030; 
    if (time == "11:30") numericTime = 1130; 
    if (time == "12:30") numericTime = 1230; 
    return numericTime; 
} 

bubbleSort = function() { 
    var swapped; 
    do { 
     swapped = false; 
     for (var i = 0; i < courseDayList.length - 1; i++) { 
     var time1 = convertTime(courseDayList[i].Start_Time); 
     var time2 = convertTime(courseDayList[i + 1].Start_Time); 
     if (time1 > time2) { 
      var temp = courseDayList[i]; 
      courseDayList[i] = courseDayList[i + 1]; 
      courseDayList[i + 1] = temp; 
      swapped = true; 
     } 
     } 
    } while (swapped); 
    } 

    printCourses = function() { 
    var counter = 0; 
    while (counter <= courseDayList.length - 1) { 
     /*var courseName = document.getElementById("cName"); 
     var courseTime = document.getElementById("cTime"); 
     var courseLocation = document.getElementById("cLocation");*/ 
     var courseName = courseDayList[counter].dept + " " + courseDayList[counter].id + "- " + courseDayList[counter].Full_Name; 
     var courseTime = courseDayList[counter].Start_Time + "-" + courseDayList[counter].End_Time; 
     var courseLocation = courseDayList[counter].Location; 

     var list = document.getElementById('list'); 
     var entry = document.createElement('li'); 
     entry.appendChild(document.createTextNode(courseName)); 
     entry.appendChild(document.createTextNode(courseTime)); 
     entry.appendChild(document.createTextNode(courseLocation)); 
     list.appendChild(entry);  

     counter++; 
    } 

    } 

showCourseFromDay = function(day) { 

    //Clear existing records 
    var list = document.getElementById('list'); 
    while (list.firstChild) list.removeChild(list.firstChild); 

    var i; 
    for (i = 0; i < courses.length; i++) { 
    var course = courses[i]; 
    console.log(course); 
    if (course.Attendance == day) { 
     courseDayList.push(course); 
    } 
    } 

    bubbleSort(); 
    printCourses(); 
    courseDayList = new Array(); 
} 
+0

衷心感謝您所做的一切 –

+0

很高興爲您提供幫助,如果您的問題已解決,請將其標記爲答案,謝謝。 – RizJa