How to compare two foreach loop data

Admin 1
Viewed 603

I am trying to compare two foreach loop data and display relevant data in a div. As in the following script its comparing data for only first row.

More detail: I want to track a user arrival between two time ranges of the current date, I am fetching user name and,city and arrival time from one table. And expected time ranges of cities from other table as you can see in the response data, When Comparing user arrival time between two time ranges of the city it is comparing for only first row (user) ignoring other rows.

I want to display a button when comparing dates with relevant city of user. If a user arrival date is between city travel start time and end time then the button should be displayed with arrived label else with on the way label.

response = {
    "result1": [{
        "Name": "Mike",
        "city": "London",
        "arival_time": "2020-06-06 18:31:57"
    }, {
        "Name": "milan",
        "city": "newyork",
        "arival_time": "2020-06-06 20:21:44"
    }],
    "result2": [{
        "city": "london",
        "start_time": "08:00:00",
        "end_time": "12:00:00"
    }, {
        "city": "newyork",
        "start_time": "06:00:00",
        "end_time": "12:00:00"
    }]
}

response.result1.forEach(function(element) {
    var city = element.city;
    response.result2.forEach(function(e) {
        const start = e.start_time;
        const end = e.end_time;
        const check = element.arival_time;

        const [date, time] = check.split(" ");
        const startDate = `${date} ${start}`;
        const endDate = `${date} ${end}`;

        const from = new Date(startDate).getTime();
        const to = new Date(endDate).getTime();
        const target = new Date(check).getTime();
        const array = e.city;

        const isInArray = array.includes(city);

        if (isInArray == true) {
            if (target >= from && target <= to) {
                $('.action').append('<button type="button" class="med_action pull-right btn btn-success"> Arrived</button>');
            } else {
                $('.action').append('<button type="button" class="med_action pull-right btn btn-warning"> on the way</button>');
            }
        }
    });
    var html = '<div class="details">' +
        '<h3><i class="fa fa-exclamation-circle"></i><span> ' + element.Name + '</span></h3>' +
        '<div class="form-inline">' +
        '<label> city : </label><span> ' + element.city + '</span>' +
        '</div>' +
        '</div>' +

        '<div class="action"></div>' +
        '</div>';

    $('#container').append(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>

jquery javascript
1 Answers

I see two problems with your code:

  1. result1[0].city is 'London' (uppercase) but result2[0].city = 'london' (lowercase) so you won't see any button for Mike.

  2. In the inner loop, the calls to $('.action').append(...) don't have any effect because <div class="action"> doesn't exist until the inner loop has finished.

Here is updated code that buffers the buttons and inserts them into <div class="action">:

response.result1.forEach(function(element) {
    var city = element.city;
    var buttons = ''; // buffer for buttons
    response.result2.forEach(function(e) {
        const start = e.start_time;
        const end = e.end_time;
        const check = element.arival_time;

        const [date, time] = check.split(" ");
        const startDate = `${date} ${start}`;
        const endDate = `${date} ${end}`;

        const from = new Date(startDate).getTime();
        const to = new Date(endDate).getTime();
        const target = new Date(check).getTime();
        const array = e.city;

        const isInArray = array.includes(city);

        if (isInArray == true) {
            if (target >= from && target <= to) {
                buttons += ('<button type="button" class="med_action pull-right btn btn-success"> Arrived</button>'); // append to buttons var
            } else {
                buttons += ('<button type="button" class="med_action pull-right btn btn-warning"> on the way</button>'); // append to buttons var
            }
        }
    });
    var html = '<div class="details">' +
        '<h3><i class="fa fa-exclamation-circle"></i><span> ' + element.Name + '</span></h3>' +
        '<div class="form-inline">' +
        '<label> city : </label><span> ' + element.city + '</span>' +
        '</div>' +
        '</div>' +

        '<div class="action">' + buttons + '</div>' +
        '</div>'; // Insert buttons

    $('#container').append(html);
});

See my comments on the lines containing // for explanations of my changes.

user_3787790
Related