JSON / JavaScript功能/实现

时间：2016-11-28 04:10:31

标签： javascript html

此代码应该：从对象中找到与所选按钮的日期匹配的课程（例如，星期一），然后;根据开始时间对该列表进行排序。由于对象中信息的性质，为了进行比较，我将它们转换为军用等价物。完成后，它应该最终显示已排序的课程列表，其中包含声明中指定的信息。

但是当我选择一个按钮时，什么也没发生。在编译时我没有显示任何内容，也没有在代码中出现任何错误。 

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>

2 个答案:

答案 0 :(得分：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() {...

答案 1 :(得分：1)

有几个问题......

1）convertTime函数拼写错误 2）嵌套函数（printCourses和bubbleSort应该在全局范围内移出）
3）HTML中的列表结构只能支持单个输出
4）阵列从未被清除 5）printCourses函数永远不会运行，因为计数器（总是0）正在根据列表的大小进行测试（从不0）

这是你的小提琴：

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();
}
相关问题
最新问题