CODEWITHSUNDEEP
arraysangularag-grid
Chances_
Chances_

Reputation: 3

Array appears to evaluate to empty after filling from HTTP GET request

I'm calling a HTTP GET to an API which gets back weather data, to display to an ag-grid table. The code, below:

getWeatherData(date?:Date){

    let array_table_rowData = new Array();
    let dte1 = new Date();
    if(date){
      dte1 = date;
    }
    dte1.setDate(dte1.getDate() - 28);
    let dte2 = dte1.setDate(dte1.getDate() + 4);
    let dte3 = dte1.setDate(dte1.getDate() + 4);
    let dte4 = dte1.setDate(dte1.getDate() + 4);
    let dte5 = dte1.setDate(dte1.getDate() + 4);
    let dte6 = dte1.setDate(dte1.getDate() + 4);
    let dte7 = dte1.setDate(dte1.getDate() + 4);

    let url_dte1 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte1, "yyyy-MM-dd");    
    let url_dte2 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte2, "yyyy-MM-dd");    
    let url_dte3 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte3, "yyyy-MM-dd");    
    let url_dte4 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte4, "yyyy-MM-dd");    
    let url_dte5 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte5, "yyyy-MM-dd");    
    let url_dte6 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte6, "yyyy-MM-dd");    
    let url_dte7 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte7, "yyyy-MM-dd");
    let array_url = [url_dte1,url_dte2,url_dte3,url_dte4,url_dte5,url_dte6,url_dte7];

    for(let i=0; i < array_url.length; i++){

        this.http.get(array_url[i]).subscribe(data => {

            let forecasts_pull = data.items[0].forecasts;
            for(let j=0; j < forecasts_pull.length; j++){
              let forecast = forecasts_pull[j]
              console.log(array_url[i]);
              this.array_rowData.push(
                {
                  date:forecast.date,
                  //tempHigh:forecast.temperature.high,
                  //tempLow:forecast.temperature.low,
                  //humiHigh:forecast.relative_humidity.high,
                  //humiLow:forecast.relative_humidity.low
                });
            }

        });
    }
  }

  async onGridReady(params){
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    await this.getWeatherData();

    console.log(this.table_rowData);

    console.log(this.array_rowData);

    this.array_rowData.forEach(forecast =>{
      console.log(forecast)
    });

    this.gridApi.setRowData(this.table_rowData);
  }
}

This calls the API just fine, but ag-grid is unable to detect that there are objects in the array. When I checked the console.log to compare a hardcoded array (table_rowData) versus getWeatherData's array, I find this:

non-empty array vs apparent empty array

I know one of the problems might be that when ag-grid finishes loading and evaluating, the array they're supposed to read from still appears to be empty. However, running setRowData after await getWeatherData yields the same result. Is there any wait to force ag-grid to wait until after the arrays finish evaluating? I have a feeling it has something to do with the way I chose to GET the data.

Appreciate any advice you guys can give!

Upvotes: 0

Views: 54

Answers (1)

Roman Šim&#237;k
Roman Šim&#237;k

Reputation: 900

Ag-grid can't know about the changes of the array. You need refactor your code, so you will call setRowData() after all HTTP requests are completed. Here's the example, how you could do that.

...
getWeatherData(date?:Date) {
    ...

    // create array of http urls
    const array_url: Array<string> = [...];

    // create array of observables
    const observableArray: Array<Observable<any>> = array_url.map((url) => this.http.get(url));

    // merge all observables into one
    forkJoin(subsArray).subscribe((data: Array<any>) => {

        // process every http response
        data.foreEach((response: any) => {
            const forecasts_pull = response.items[0].forecasts;

            forecasts_pull.forEach((forecast: any) => {
                // push into the row data array
                this.array_rowData.push({
                    date: forecast.date,   
                })
            })
        })

        // after every response is processed, set the rowData
        this.gridApi.setRowData(this.array_rowData)
     }); 
   }

onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
}

Upvotes: 1

Related Questions