Question

如何通过使用for循环添加JavaScript代码来迭代包含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页面上的list元素。

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,output

JavaScript函数显示计划

1 个答案: