Using filter() to filter nested arrays date/times based on the current date/time: JavaScript

user_16896898 0
Viewed 112

I am working with a nested JSON array. As shown below, The "booking_status" array has multiple arrays within, I would like to present on my table only the array that falls within the current time.

So, using the filter() method, I tried to compare the current time against each array check_in and check_out dates/time. If the current time is between these two values, only this array's details should be returned on my table else return the string "NOTHING". I wrote the codes below, but they return no values. I am not sure what I did wrong, please note the I am very new to Java and still learning from tutorials.

JSON Array:

[
    {
        "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:

<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>
arrays html json javascript
1 Answers

  1. Even though you have filtered out your desired objects and stored them inside FinalBooking, you are not using this variable in your <td></td> and hence you are not seeing the filtered result. Use this instead:

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

  2. Inside your booking_status array, check_in and check_out are of type string whereas inside your filter method you are comparing them against the type of Date. To fix this, convert your check_in and check_out to Date as well

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

  3. To conditionally print All data or "NOTHING", you will have to build the string conditionally as well by checking the length of your filtered array. If the length of this array is zero, we can say that there is no data

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

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

user_103019380
Related