是否可以筛选 JSON 源以仅显示时间戳字符串中的时间

can a JSON feed be filtered to just show time from timestamp string?

本文关键字:字符串 时间戳 时间 显示 筛选 JSON 是否      更新时间:2023-09-26

>我正在通过JSONP远程检索外部JSON提要。JSON 源包含大量数据,包括数组中的start_time和end_time变量,这些变量的时间数据编码在"JavaScript 内置 JSON 对象和ISO8601"中,如下所示:

2016-01-21T13:00:00+10:00
我想

将数据放在预先格式化的表中(有一个很好的理由),我想删除日期数据并将时间留在值上(即 13:00)。

是否可以过滤/解析整个 JSON 数据对象并将所有这些时间戳数据字符串转换为在我开始使用数据之前仅显示时间(例如直接在 API 源上运行的预格式化)?

JSON 数据的示例代码段:

var response={
  "bookings": {
    "group_id": 12306,
    "name": "Public Meeting Rooms",
    "url": "http:theurlfeed.from.libcal",
    "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"
  }
}

如上所述,您需要自己格式化日期。Javascript没有原生的日期格式化器,但是,你可以使用moment.js来完成这项工作:http://momentjs.com/

// TODO: Iterate the array getting the objects
var obj = { date_field :  "2016-01-20T15:00:00+10:00"};
obj.formated_field = moment(obj.date_field).format('HH:mm');
   
console.log(obj);
// TODO: Display the formatted_field on your table
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

对于你想要做的大多数事情,没有任何内置的方法,所以你将不得不制作自己的方法。

您需要定义一个函数,以从时间戳中获取所需格式的小时和分钟。可以使用 Date 构造函数从时间戳中获取日期对象,然后使用 Date.toTimeString() 并提取由分号连接的结果的前两个部分。

function getTime(timestamp) {
    return new Date(timestamp).toTimeString().split(':').filter(function(v,k){
        return k < 2;
    }).join(':');
}

然后,只需循环遍历时隙并将函数的结果分配给原始属性即可。JavaScript 对象是按引用传递的,这意味着我们可以缓存对象路径以保存一些击键。

for(var i in timeslots) {
    timeslots[i].booking_start = getTime(timeslots[i].booking_start);
    timeslots[i].booking_end   = getTime(timeslots[i].booking_end);
}

这是一个简单的示例,我精简并压缩了 JSON 对象以节省此处的空间。

// The slimmed down and condensed object
var response = {
    "bookings": {
        "group_id": 12306,
        "name": "Public Meeting Rooms",
        "url": "http:theurlfeed.from.libcal",
        "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"}], 
        "last_updated": "2016-01-20T12:40:36+10:00"
    }
};
// Make it a function, for ease of use
function formatTimes(bookings) {
    // Format the timestamps
    function getTime(timestamp) {
        return new Date(timestamp).toTimeString().split(':').filter(function(v,k){
            return k < 2;
        }).join(':');
    }
    
    // Iterate timeslots, replacing the start and end values
    for(var i in bookings.timeslots) if(bookings.timeslots.hasOwnProperty(i)) {
        var timeslot = bookings.timeslots[i];
        timeslot.booking_start = getTime(timeslot.booking_start);
        timeslot.booking_end   = getTime(timeslot.booking_end);
    }
    
    // Replace the last updated value
    bookings.last_updated = getTime(bookings.last_updated);
}
// Format the times and display the result
formatTimes(response.bookings);
document.body.innerHTML = '<pre>' + JSON.stringify(response.bookings, null, 4) + '</pre>';