打印选择一个JSON数组数据到使用JQuery页面 [英] Printing a selection of a JSON array data out to a page using JQuery
本文介绍了打印选择一个JSON数组数据到使用JQuery页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
不与一个棘手的JSON对象运气和获得它的某些数据写入到一个HTML页面。我试图为目标的数组中只有特定的数据集 - 而不是整个阵列。我有过JSON对象/数据正在$ P $不幸的是如何psented无法控制的。
Not having much luck with a tricky JSON object and getting it to write certain data into a HTML page. I am attempting to target only particular sets of data in the array - not the whole array. I have got no control over how the JSON object/data is being presented unfortunately.
下面是我做了什么：
<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>
现在，它只能打印出最后一个项目在数组中，并非所有节点间的数据0-7。
Right now, it only prints out the last item in the array, not all the data between nodes 0-7.
编辑：是不是太亮从插入一个链接的实时API饲料，所以我已经削减和JSON数据粘贴到这个问题。
Was not too bright inserting a live API feed from a link so I have cut and paste the JSON data into this question.
推荐答案
您需要做的首先遍历嵌套的JSON和组一起为每个房间像这样的信息：
What you need to do is first iterate the nested JSON and group together the information for each room like this:
// 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: ....
}
*/
然后就可以循环新创建的数组和显示任何你需要的数据了。
Then you can loop over the newly created array and display whatever data you need.
下面是一个展示的jsfiddle你怎么可能推动这一实际显示数据。
这篇关于打印选择一个JSON数组数据到使用JQuery页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
