Using for loop with ajax issue

Question

I am creating fullcalendar to create events. I get the value from rest api from looping start date and end date. My idea is when there is no data that day I want to show event and vacant day, but always I am getting end of the loop date. Please guide what can i do to get incremental value.

I am sure it have ajax asynchronous issue due to that it is happening. I just need help for that

My codes

        var startDate = calendar.fullCalendar('getView').start;
        var endDate = calendar.fullCalendar('getView').end;
        $.ajax({
            url: "/_api/lists/getbytitle('Item')/items?$select=Title,Category&$orderby=Category&$filter=Category eq '" + $("#items").val() + "'",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" }
        }).then(function (data) {
            var promises = data.d.results.map(function (item, i) {
                var _url = "/_api/lists/getbytitle('ItemRequestLog')/items?$select=Title,ItemRequest/Title,DateRequestedFrom,DateRequestedTo&$expand=ItemRequest&$filter=Title eq '" + item.Title + "'";
                for (var d = new Date(startDate.format()); d < new Date(endDate.format()); d.setDate(d.getDate() + 1)) {
                    var e = moment(d).add(1, 'days'); console.log(d) //here value is good
                    _url += " and (DateRequestedFrom ge datetime'" + d.toISOString() + "') and (DateRequestedTo le datetime'" + e.toISOString() + "')";
                    $.ajax({
                        url: _url,
                        method: "GET",
                        headers: { "Accept": "application/json; odata=verbose" }
                    }).then(function (data) {
                        if (data.d.results.length == 0) {
                            console.log(d) //here I am getting end of the loop value
                            event.title = item.Title;
                            event.start = d;
                            event.end = e;
                            event.allDay = true;
                            event.color = "yellow";
                            $('#calendar').fullCalendar('renderEvent', event, true);
                        }
                        var promises = data.d.results.map(function (itemLog, i) {
                            event.title = itemLog.Title;
                            event.start = moment(itemLog.DateRequestedFrom);
                            event.end = moment(itemLog.DateRequestedTo);
                            event.allDay = false;
                            event.color = "red";
                            $('#calendar').fullCalendar('renderEvent', event, true);
                        });
                    })
                    _url = "/_api/lists/getbytitle('ItemRequestLog')/items?$select=Title,ItemRequest/Title,DateRequestedFrom,DateRequestedTo&$expand=ItemRequest&$filter=Title eq '" + item.Title + "'";
                }
            });
        });

Kindly help how resolve it.

The functions you're creating inside the loop use variables that you're changing in the loop. See the linked question's answers for why that causes trouble, and what to do about it. — T.J. Crowder, Mar 27 '18 at 07:01

score 0 · Answer 1 · answered Mar 27 '18 at 06:58

0

var gets hoisted, and has function scope, not block scope: in asynchronous code, if you're using a for loop, make sure to use let, that way, each iteration of the loop will have a separate binding for the variable in question.

Change

for (var d = new Date(startDate.format()); d < new Date(endDate.format()); d.setDate(d.getDate() + 1)) {

to

for (let d = new Date(startDate.format()); d < new Date(endDate.format()); d.setDate(d.getDate() + 1)) {

answered Mar 27 '18 at 06:58

CertainPerformance

356,069
52
309
320

This is one of the most duplicated questions in the JavaScript tag. It doesn't need another answer here, just a close vote (and comment if appropriate). :-) – T.J. Crowder Mar 27 '18 at 07:00
@CertainPerformance Still it is same no change – Milind Mar 27 '18 at 07:02
@T.J. Crowder reason I am asking is that I have ajax function and I did not find anything for for loop with ajax. So please let the expert reply – Milind Mar 27 '18 at 07:03
@Milind: The experts **have** replied, extensively, in the linked qusetion's answers. As I pointed out in a comment on the question, the problem is that you're creating functions in the loop (e.g., that are called later) that use variables that the loop changes. If you go read the question there and its answers, it will tell you exactly what to do about it. – T.J. Crowder Mar 27 '18 at 07:05
I found the way if you use jQuery for each than it can help you – Milind Apr 06 '18 at 18:29

Using for loop with ajax issue

1 Answers1