使用 filter() 根据当前日期/时间过滤嵌套数组日期/时间：JavaScript

Question

我正在使用嵌套的 JSON 数组。如下图，“booking_status”数组里面有多个数组，我想在我的表上只显示当前时间范围内的数组。

因此，使用 filter() 方法，我尝试将当前时间与每个数组 check_in 和 check_out 日期/时间进行比较。如果当前时间介于这两个值之间，则应在我的表上仅返回此数组的详细信息，否则返回字符串“NOTHING”。我写了下面的代码，但它们没有返回值。我不确定我做错了什么，请注意我是 Java 新手，还在学习教程。

JSON 数组：

[
    {
        "id": 2,
        "item_name": "Rose Red",
        "author": "Stephen King",
        "booking_status": [
            {
                "check_in": "2021-09-22T08:27:00+04:00",
                "check_out": "2021-09-23T08:27:00+04:00",
                "status": "Currently Booked"
            },
            {
                "check_in": "2021-09-25T08:37:00+04:00",
                "check_out": "2021-09-26T08:37:00+04:00",
                "status": "Currently Free"
            },
            {
                "check_in": "2021-09-27T08:37:00+04:00",
                "check_out": "2021-09-28T08:37:00+04:00",
                "status": "Currently Free"
            },
            {
                "check_in": "2021-09-22T08:27:00+04:00",
                "check_out": "2021-09-23T08:27:00+04:00",
                "status": "Currently Booked"
            },
            {
                "check_in": "2021-09-25T08:37:00+04:00",
                "check_out": "2021-09-26T08:37:00+04:00",
                "status": "Currently Free"
            }
        ]
    }
]

脚本：

<script>
    $(document).ready(function () {
        $.ajax({
            url: 'http://localhost:8000/',
            dataType: 'JSON',
            success: function (data) {
                var content = ''
                data.forEach(item => {
                    const booking = item.booking_status;
                    let currentDatetime = new Date();
                    let FinalBooking = booking.filter(obj => obj.check_in <= currentDatetime < obj.check_out);
                    console.log(currentDatetime);
                    console.log(FinalBooking);
                    content += "<tr>><td>"
                        + item.item_name + "</td><td>"
                        + item.author+ "</td><td>"
                        + item.booking_status.map(s => s.status).join('<br/>') + "</td></tr>"
                })
                                $('#table_body').html(content);
            }
        })

    });
</script>

Answer 1

1. 即使您已过滤掉所需的对象并将它们存储在 FinalBooking 中，您也没有在 <td></td> 中使用此变量，因此您看不到过滤后的结果。改用这个：

   FinalBooking.map(s => s.status).join()

2. 在您的booking_status 数组中，check_in 和check_out 是字符串类型，而在您的过滤器方法中，您将它们与Date 的类型进行比较。要解决此问题，请将您的 check_in 和 check_out 也转换为 Date

   let FinalBooking = booking.filter(obj => new Date(obj.check_in) <= currentDatetime && currentDatetime < new Date(obj.check_out));

3. 要有条件地打印所有数据或“NOTHING”，您还必须通过检查过滤数组的长度来有条件地构建字符串。如果这个数组的长度为零，我们可以说没有数据

   content += "<tr>><td>" + item.item_name + "</td><td>" + item.author+ "</td><td>"

   content += FinalBooking.length === 0 ? "NOTHING" : FinalBooking.map(s => s.status).join()