JavaScript函数显示时间表

Question

如何添加JavaScript代码，通过使用for循环来迭代包含JSON数据的调度数组？

var schedule = [{
  "id": "session-1",
  "title": "Registration",
  "tracks": [1, 2]
}, {
  "id": "session-2",
  "title": "Moving the Web forward with HTML5",
  "tracks": [1, 2]
}, {
  "id": "session-3",
  "title": "Diving in at the deep end with Canvas",
  "tracks": [1]
}, {
  "id": "session-4",
  "title": "New Technologies in Enterprise",
  "tracks": [2]
}, {
  "id": "session-5",
  "title": "WebSockets and You",
  "tracks": [1]
}, {
  "id": "session-6",
  "title": "Coffee and Cake Break",
  "tracks": [1, 2]
}, {
  "id": "session-7",
  "title": "Building Responsive UIs",
  "tracks": [1]
}, {
  "id": "session-8",
  "title": "Fun with Forms (no, really!)",
  "tracks": [2]
}, {
  "id": "session-9",
  "title": "A Fresh Look at Layouts",
  "tracks": [1]
}, {
  "id": "session-10",
  "title": "Real-world Applications of HTML5 APIs",
  "tracks": [2]
}, {
  "id": "session-11",
  "title": "Lunch",
  "tracks": [1, 2]
}, {
  "id": "session-12",
  "title": "Getting to Grips with JavaScript",
  "tracks": [1]
}, {
  "id": "session-13",
  "title": "Transforms and Animations",
  "tracks": [2]
}, {
  "id": "session-14",
  "title": "Web Design Adventures with CSS3",
  "tracks": [1]
}, {
  "id": "session-15",
  "title": "Introducing Data Access and Caching",
  "tracks": [2]
}, {
  "id": "session-16",
  "title": "Closing Thanks and Prizes",
  "tracks": [1, 2]
}];

// TODO: Task 2 - Get the "schedule" list element from the document
var list = document.getElementById("schedule");

function createSessionElement(session) {
  var session = document.createElement("li");
  li.textContent = session;
  JSON.parse(session, [title]);
  return the < li >

    {
      // TODO: Task 3 - Create a <li> element for the session.
      //       Add the session title as the <li> text content
      //       Return the <li> element
    }
};
function clearList() {
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
}
function displaySchedule() {
  clearList();
  for (var i = 0; i < 14; i++) {
    list.textContent(title);
  }

  // TODO: Task 4 - Loop through the schedule array
  //       Create session elements
  //       Append the elements to the list   
}

我不能让它为数组中的每个项目创建一个会话对象，并将会话的标题添加到Schedule页面上的列表元素中。

Answer 1

最简单的解决方案是使用像jQuery这样的库来处理DOM操作。在jQuery的帮助下，可以很容易地为数组中的每个项向列表中添加一个<li/>元素。

类似于：

var $list = $("#schedule");
$.each(schedule, function(i, session) {
    $list.append("<li>" + session.title + "</li>");
});

http://jsbin.com/qigilidofa/edit?html，js，输出