the global variable is getting undefined in HTTP call

Question

I need to get the list of dates from the server by using an API HTTP call. After that, I need to display the background color for that date in a calendar.

Here I'm getting data from HTTP call nicely. That data is assigning to one global variable. That global variable is getting "undefined" after assigning data(Which is getting from server).

Global variable Declaration:

unAvailableDays:any=[];

HTTP call:

beforeMonthViewRender(renderEvent: CalendarMonthViewBeforeRenderEvent): void {
    let startday =this.datepipe.transform(this.startDate,'MM-dd-yyyy');
    let endday = this.datepipe.transform(this.endDate,'MM-dd-yyyy');
    this.sharedService.GetUnAvailableTimeSlotsDatesBetweenTwoDatesByMemberID(this.sharedService.MemberID,startday,endday)
        .subscribe((data:any) => {
            this.unAvailableDays=data,
            console.log( this.unAvailableDays)
        });

    renderEvent.body.forEach(day => {
        const dayOfMonth = day.date.getDate();
        for(var i =0;i<this.unAvailableDays.length;i++) {
            console.log(dayOfMonth);
            if(new Date(this.unAvailableDays[i].date).getDate()==dayOfMonth) {
                day.cssClass = 'bg-pink';
                break;
            }
        }
    });

renderEvent is calling before data assigning to this.unAvailableDays which is mentioned inside of HTTP call.

Please Help me.

What about only ```data``` variable, is it filled with data when coming back from server? — thezeeshantariq, Mar 02 '20 at 06:50
@thezeeshantariq, is there any mistakes in my code please let me know. — Moses Burla, Mar 02 '20 at 07:06
Your code is looking OK. Can you check the data-type of your ```data``` variable? — thezeeshantariq, Mar 02 '20 at 07:10
Ok, then try to call renderEvent in subscribe function/lambda, or wait for data to be received and then call renderEvent using boolean flag — thezeeshantariq, Mar 02 '20 at 07:18
@thezeeshantariq I tried render event in subscribe function.It's not working.How can i use wait() for this function untill i get the data — Moses Burla, Mar 02 '20 at 07:23
try to declare variable ```let global = this;``` and then use it like, ```global.unAvailableDays=data;``` — thezeeshantariq, Mar 03 '20 at 04:10

score 0 · Answer 1 · answered Mar 02 '20 at 07:14

You should move the renderEvent code inside the subscribe. You are trying to render something before it is assigned (render code is called most likely before your HTTP call finishes).

As a tip, always align your code properly, you will see it better.

beforeMonthViewRender(renderEvent: any): void {
  let startday = this.datepipe.transform(this.startDate, "MM-dd-yyyy");
  let endday = this.datepipe.transform(this.endDate, "MM-dd-yyyy");
  this.sharedService
    .GetUnAvailableTimeSlotsDatesBetweenTwoDatesByMemberID(
      this.sharedService.MemberID,
      startday,
      endday
    )
    .subscribe((data: any) => {
      this.unAvailableDays = data;
      console.log(this.unAvailableDays);

      renderEvent.body.forEach(day => {
        const dayOfMonth = day.date.getDate();
        for (var i = 0; i < this.unAvailableDays.length; i++) {
          console.log(dayOfMonth);
          if (new Date(this.unAvailableDays[i].date).getDate() == dayOfMonth) {
            day.cssClass = "bg-pink";
            break;
          }
        }
      });
    });
};

what is the output of this.unAvailableDays? and does it enter the for loop? Also, show me the contents of renderEvent.body — tudor.gergely, Mar 02 '20 at 07:22
yes, it's entering into the loop but this.unAvailableDays is getting undefined. — Moses Burla, Mar 02 '20 at 07:26
if it enters the forLoop it cannot be undefined. What is logged to the console if you remove all breakpoints? — tudor.gergely, Mar 02 '20 at 07:31

the global variable is getting undefined in HTTP call

1 Answers1