Javascript 使用JQuery将选定的JSON数组数据打印到页面_Javascript_Jquery_Arrays_Json

Javascript 使用JQuery将选定的JSON数组数据打印到页面

javascript jquery arrays json

Javascript 使用JQuery将选定的JSON数组数据打印到页面,javascript,jquery,arrays,json,Javascript,Jquery,Arrays,Json,在处理棘手的JSON对象时运气不佳，无法将某些数据写入HTML页面。我试图只针对数组中的特定数据集，而不是整个数组。不幸的是，我无法控制JSON对象/数据的显示方式以下是我所做的： <script> var response={ "bookings": { "group_id": 12306, "name": "Public Meeting Rooms", "url": "http:\/\/slqpub.libcal.com\/rooms

在处理棘手的JSON对象时运气不佳，无法将某些数据写入HTML页面。我试图只针对数组中的特定数据集，而不是整个数组。不幸的是，我无法控制JSON对象/数据的显示方式

以下是我所做的：

    <script>
    var response={
  "bookings": {
    "group_id": 12306,
    "name": "Public Meeting Rooms",
    "url": "http:\/\/slqpub.libcal.com\/rooms.php?i=12306",
    "timeslots": [{
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T10:00:00+10:00",
      "booking_end": "2016-01-20T11:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T11:00:00+10:00",
      "booking_end": "2016-01-20T12:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T12:00:00+10:00",
      "booking_end": "2016-01-20T13:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Jo Tindall and Sagarika",
      "booking_start": "2016-01-20T14:00:00+10:00",
      "booking_end": "2016-01-20T15:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Jo Tindall and Sagarika",
      "booking_start": "2016-01-20T15:00:00+10:00",
      "booking_end": "2016-01-20T16:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "James Math",
      "booking_start": "2016-01-20T16:00:00+10:00",
      "booking_end": "2016-01-20T17:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "James Math",
      "booking_start": "2016-01-20T17:00:00+10:00",
      "booking_end": "2016-01-20T18:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "James Math",
      "booking_start": "2016-01-20T18:00:00+10:00",
      "booking_end": "2016-01-20T19:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "IELTS",
      "booking_start": "2016-01-20T10:00:00+10:00",
      "booking_end": "2016-01-20T11:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "recording",
      "booking_start": "2016-01-20T11:00:00+10:00",
      "booking_end": "2016-01-20T12:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "recording",
      "booking_start": "2016-01-20T12:00:00+10:00",
      "booking_end": "2016-01-20T13:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "IELTS",
      "booking_start": "2016-01-20T13:00:00+10:00",
      "booking_end": "2016-01-20T14:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "IELTS",
      "booking_start": "2016-01-20T15:00:00+10:00",
      "booking_end": "2016-01-20T16:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "Luke",
      "booking_start": "2016-01-20T16:00:00+10:00",
      "booking_end": "2016-01-20T17:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "Luke",
      "booking_start": "2016-01-20T17:00:00+10:00",
      "booking_end": "2016-01-20T18:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "Luke",
      "booking_start": "2016-01-20T18:00:00+10:00",
      "booking_end": "2016-01-20T19:00:00+10:00"
    }],
    "last_updated": "2016-01-20T12:40:36+10:00"
  }
}

    </script> 

    <table border="1">
    <tr><th>Room Name</th><th>Booked by</th></tr>
    <tr><td>Meeting Room 2A</td><td><span id="room_bookings2a"></span></td></tr>
    <tr><td>Meeting Room 2B</td><td><span id="room_bookings2b"></span></td></tr>
    <tr><td>Meeting Room 4B</td></tr>
    <tr><td>Meeting Room 4A</td></tr>
    <tr><td>Meeting Room 3E</td></tr>
    <tr><td>Meeting Room 3D</td></tr>
    <tr><td>Meeting Room 3C</td></tr>
    <tr><td>Meeting Room 3B</td></tr>
    <tr><td>Meeting Room 3A</td></tr>
    <tr><td>Meeting Room 2D</td></tr>
    <tr><td>Meeting Room 2C</td></tr>
    <tr><td>Meeting Room 2B</td></tr>
    <tr><td>Meeting Room 4D</td></tr>
    </table>


var响应={
“预订”：{
“组id”：12306，
“名称”：“公共会议室”，
“url:“http:\/\/slqpub.libcal.com\/rooms.php？i=12306”，
“时隙”：[{
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“麻将”，
“预订开始”：“2016-01-20T10:00:00+10:00”，
“预订结束”：“2016-01-20T11:00:00+10:00”
}, {
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“麻将”，
“预订开始”：“2016-01-20T11:00:00+10:00”，
“预订结束”：“2016-01-20T12:00:00+10:00”
}, {
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“麻将”，
“预订开始”：“2016-01-20T12:00:00+10:00”，
“预订结束”：“2016-01-20T13:00:00+10:00”
}, {
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“Jo Tindall和Sagarika”，
“预订开始”：“2016-01-20T14:00:00+10:00”，
“预订结束”：“2016-01-20T15:00:00+10:00”
}, {
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“Jo Tindall和Sagarika”，
“预订开始”：“2016-01-20T15:00:00+10:00”，
“预订结束”：“2016-01-20T16:00:00+10:00”
}, {
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“詹姆士数学”，
“预订开始”：“2016-01-20T16:00:00+10:00”，
“预订结束”：“2016-01-20T17:00:00+10:00”
}, {
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“詹姆士数学”，
“预订开始”：“2016-01-20T17:00:00+10:00”，
“预订结束”：“2016-01-20T18:00:00+10:00”
}, {
“房间id”：“36615”，
“会议室名称”：“2A会议室”，
“预订标签”：“詹姆士数学”，
“预订开始”：“2016-01-20T18:00:00+10:00”，
“预订结束”：“2016-01-20T19:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“雅思”，
“预订开始”：“2016-01-20T10:00:00+10:00”，
“预订结束”：“2016-01-20T11:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“录制”，
“预订开始”：“2016-01-20T11:00:00+10:00”，
“预订结束”：“2016-01-20T12:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“录制”，
“预订开始”：“2016-01-20T12:00:00+10:00”，
“预订结束”：“2016-01-20T13:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“雅思”，
“预订开始”：“2016-01-20T13:00:00+10:00”，
“预订结束”：“2016-01-20T14:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“雅思”，
“预订开始”：“2016-01-20T15:00:00+10:00”，
“预订结束”：“2016-01-20T16:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“卢克”，
“预订开始”：“2016-01-20T16:00:00+10:00”，
“预订结束”：“2016-01-20T17:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“卢克”，
“预订开始”：“2016-01-20T17:00:00+10:00”，
“预订结束”：“2016-01-20T18:00:00+10:00”
}, {
“房间id”：“36616”，
“会议室名称”：“会议室2B”，
“预订标签”：“卢克”，
“预订开始”：“2016-01-20T18:00:00+10:00”，
“预订结束”：“2016-01-20T19:00:00+10:00”
}],
“最近更新”：“2016-01-20T12:40:36+10:00”
}
}
房间名预订人
会议室2A
会议室2B
会议室4B
第4A会议室
3E会议室
3D会议室
会议室3C
会议室3B
3A会议室
会议室2D
会议室2C
会议室2B
4D会议室

现在，它只打印出数组中的最后一项，而不是节点0-7之间的所有数据

编辑：从链接插入实时API提要不是很聪明，所以我将JSON数据剪切并粘贴到这个问题中。

您需要做的是首先迭代嵌套的JSON，并将每个房间的信息分组，如下所示：

// loop over the object and gather all the information for each room type  
var bookingsByRoom = {};
$.each(response.bookings.timeslots, function(i, timeslot) {
  var room = timeslot.room_name;
  if (bookingsByRoom[room]) bookingsByRoom[room].push(timeslot);
  else bookingsByRoom[room] = [timeslot];
});
/*
bookingsByRoom is now an object like:
{
  Meeting Room 2 A: {
    booking_end: "2016-01-20T11:00:00+10:00",
    booking_label: "Mahjong"
    booking_start: "2016-01-20T10:00:00+10:00"
    room_id: "36615"
    room_name: "Meeting Room 2A"
  }, {
    booking_end: "2016-01-20T12:00:00+10:00"
    booking_label: "Mahjong"
    booking_start: "2016-01-20T11:00:00+10:00"
    room_id: "36615"
    room_name: "Meeting Room 2A"
  }
}, 
{
  Meeting Room 2 B: ....
}

*/

然后，您可以在新创建的数组上循环并显示所需的任何数据

您需要做的是首先迭代嵌套的JSON，并将每个房间的信息分组，如下所示：

// loop over the object and gather all the information for each room type  
var bookingsByRoom = {};
$.each(response.bookings.timeslots, function(i, timeslot) {
  var room = timeslot.room_name;
  if (bookingsByRoom[room]) bookingsByRoom[room].push(timeslot);
  else bookingsByRoom[room] = [timeslot];
});
/*
bookingsByRoom is now an object like:
{
  Meeting Room 2 A: {
    booking_end: "2016-01-20T11:00:00+10:00",
    booking_label: "Mahjong"
    booking_start: "2016-01-20T10:00:00+10:00"
    room_id: "36615"
    room_name: "Meeting Room 2A"
  }, {
    booking_end: "2016-01-20T12:00:00+10:00"
    booking_label: "Mahjong"
    booking_start: "2016-01-20T11:00:00+10:00"
    room_id: "36615"
    room_name: "Meeting Room 2A"
  }
}, 
{
  Meeting Room 2 B: ....
}

*/

然后，您可以在新创建的数组上循环并显示所需的任何数据

我编写了javascript代码

// Using LibCal and JSONP
$.ajax({
url: "https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41",

// The name of the callback parameter, as specified by the YQL service
jsonp: "callback",

// Tell jQuery we're expecting JSONP
dataType: "jsonp",

// Work with the response
success: function( response ) {
        console.log(response);
    var data = response.bookings.timeslots;
    var room  = {};
    var roomInfo = {};

    $.each(data, function(index,element){
        if(typeof room[element.room_id] === "undefined"){
        room[element.room_id] = [];
        roomInfo[element.room_id] = element.room_name;
      }
      room[element.room_id].push(element);
    });




    for(var roomId in room){
        var dest = room[roomId];
      var tr = $('<tr>');
      tr.append($('<td>'+roomInfo[roomId]+'</td>'));
      var td = $('<td>');
      for(var i=0; i<dest.length; i++){
        var item = dest[i];
        var div = $('<div></div>');
        div.text(item.booking_label+" ["+item.booking_start+" : "+item.booking_end+"]");
        td.append(div);
      }

      tr.append(td);

      $("table").append(tr);
    }

}
});

//使用LibCal和JSONP
$.ajax({
url:“https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41",
//由YQL服务指定的回调参数的名称
jsonp：“回调”，
//告诉jQuery我们期待JSONP
数据类型：“jsonp”，
//与响应一起工作
成功：功能（响应）{
控制台日志（响应）；
var数据=response.bookings.timeslot；
变量室={}；
var roomInfo={}；
$.each（数据、函数（索引、元素）{
if（房间类型[元素.房间\u id]=“未定义”）{
房间[element.room_id]=[]；
roomInfo[element.room\u id]=element.room\u名称；
}
房间[element.room\u id]。推送（element）；
});
用于（房间中的var roomId）{
var dest=房间[房间ID]；
var tr=$（''）；
tr.append（$（''+roomInfo[roomId]+''）；
var td=$（''）；
对于（var i=0；i我编写了javascript代码
// Using LibCal and JSONP
$.ajax({
url: "https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41",

// The name of the callback parameter, as specified by the YQL service
jsonp: "callback",

// Tell jQuery we're expecting JSONP
dataType: "jsonp",

// Work with the response
success: function( response ) {
        console.log(response);
    var data = response.bookings.timeslots;
    var room  = {};
    var roomInfo = {};

    $.each(data, function(index,element){
        if(typeof room[element.room_id] === "undefined"){
        room[element.room_id] = [];
        roomInfo[element.room_id] = element.room_name;
      }
      room[element.room_id].push(element);
    });




    for(var roomId in room){
        var dest = room[roomId];
      var tr = $('<tr>');
      tr.append($('<td>'+roomInfo[roomId]+'</td>'));
      var td = $('<td>');
      for(var i=0; i<dest.length; i++){
        var item = dest[i];
        var div = $('<div></div>');
        div.text(item.booking_label+" ["+item.booking_start+" : "+item.booking_end+"]");
        td.append(div);
      }

      tr.append(td);

      $("table").append(tr);
    }

}
});

//使用LibCal和JSONP
$.ajax({
url:“https://api2.libcal.com/1.0/room_b