您的位置: 首页  >  技术问答  >  JSON/JavaScript功能/实现

JSON/JavaScript功能/实现

分类: 技术问答 • 2022-04-11 23:37:59

JSON/JavaScript功能/实现

问题描述：

此代码应该：找到匹配所选按钮的日期（例如，星期一）的对象课程，然后;根据开始时间对列表进行排序。由于对象中信息的性质，我将它们转换为军事等值用于比较目的。一旦完成后，它应该最终显示具有在声明中指定的信息的已排序课程列表。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

答 

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）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

相关推荐