Angular2 ag-grid datasource not working

Question

I am trying to get my ag-grid working but I get an error.

Here is the code:

import { Component, OnInit } from '@angular/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';


import {ClientsService} from './clients.service';

@Component({
    moduleId: module.id,
    selector: 'clients',
    directives: [AgGridNg2],
    templateUrl: 'clients.component.html',
    providers: [ClientsService]
})
export class ClientsComponent implements OnInit {

    private gridOptions: GridOptions;
    private showGrid: boolean;
    private rowData: any[];
    private columnDefs: any[];
    private rowCount: string;

    constructor(private _clientsService : ClientsService) {

        this.gridOptions = <GridOptions>{};
        this.createColumnDefs();
        this.showGrid = true;

        this.gridOptions = {
            columnDefs: this.columnDefs,
        }   

         this.gridOptions = <GridOptions>{
            onGridReady: () => {
                this.gridOptions.api.sizeColumnsToFit();
                this.gridOptions.api.setDatasource(this.dataSource);
            }
        };


     }

    ngOnInit() { }

    dataSource = {
        pageSize: 10,
        overflowSize: 100,

       getRows: (params: any) => {
            this.returnRows().subscribe(data => {

                var test =
                    [{"ClientName":"Ronald Bowman","Country":"China","CreatedOn":"Lutou","email":"rbowman0@spotify.com"},
                    {"ClientName":"Pamela Hill","Country":"Russia","CreatedOn":"Krylovskaya","email":"phill1@symantec.com"},
                    {"ClientName":"Robin Andrews","Country":"Ukraine","CreatedOn":"Korop","email":"randrews2@photobucket.com"},
                    {"ClientName":"Peter Kim","Country":"Mexico","CreatedOn":"San Jose","email":"pkim3@theatlantic.com"},
                    {"ClientName":"Carol Foster","Country":"Mexico","CreatedOn":"El Aguacate","email":"cfoster8@intel.com"},
                 ];

                 var rowsThisPage = data.slice(params.startRow, params.endRow);

                 var lastRow = -1;

                 params.successCallback(rowsThisPage, lastRow);

            });
        }
    }


    private returnRows(){
        return this._clientsService.getClientsForDataTable();
    }   


     private createColumnDefs() {
        this.columnDefs  = [
            {headerName: 'Client Name', field: "ClientName", width: 200 },
            {headerName: 'Country', field: "Country" ,width:180},
            {headerName: 'Created On', field: "CreatedOn" ,width:160}
        ];
    }

}

This is my service which is getting data from the backend as JSON:

import { Injectable } from '@angular/core';

import {Http, Response, Headers} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { GlobalVariablesService } from '../../shared/global/global-variables.service';

@Injectable()
export class ClientsService {

    constructor(public _http:Http, private _globalVariables: GlobalVariablesService) { 

    }

    getClientsForDataTable() {
            return this._http.get(this._globalVariables.BACKEDN_API_GET_ALL_CLIENTS_FOR_DATA_TABLE) 
           .map((res:Response) => res.json())
           .catch(this.handleError);
    }

    private handleError (error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
  }
}

As you can see in my component above, when trying with hard-coded JSON data it works fine, but when I replace it with the actual HTTP response I get an error, as seen below:

getRows: (params: any) => {
            this.returnRows().subscribe(data => {

                var test =
                    [{"ClientName":"Ronald Bowman","Country":"China","CreatedOn":"Lutou","email":"rbowman0@spotify.com"},
                    {"ClientName":"Pamela Hill","Country":"Russia","CreatedOn":"Krylovskaya","email":"phill1@symantec.com"},
                    {"ClientName":"Robin Andrews","Country":"Ukraine","CreatedOn":"Korop","email":"randrews2@photobucket.com"},
                    {"ClientName":"Peter Kim","Country":"Mexico","CreatedOn":"San Jose","email":"pkim3@theatlantic.com"},
                    {"ClientName":"Carol Foster","Country":"Mexico","CreatedOn":"El Aguacate","email":"cfoster8@intel.com"},
                 ];

                 var rowsThisPage = data.slice(params.startRow, params.endRow);

                 var lastRow = -1;

                 params.successCallback(rowsThisPage, lastRow);

            });
        }

Here is the error:

EXCEPTION: TypeError: rowData.forEach is not a function TypeError: rowData.forEach is not a function at recursiveFunction (inMemoryRowModel.js:355) at InMemoryRowModel.createRowNodesFromData (inMemoryRowModel.js:330) at InMemoryRowModel.setRowData (inMemoryRowModel.js:296) at PaginationController.pageLoaded (paginationController.js:138) at Object.successCallback (paginationController.js:210) at SafeSubscriber.eval [as _next] (clients.component.ts:64) at SafeSubscriber.__tryOrUnsub (Rx.js?1467025050775:10855) at SafeSubscriber.next (Rx.js?1467025050775:10810) at Subscriber._next (Rx.js?1467025050775:10766) at Subscriber.next (Rx.js?1467025050775:10743)

I have tested the JSON result coming from 'data' and it should be fine since I have just copied and replaced it instead of the test data.

Can anyone help me regarding this error?

Answer 1

the data should be an array of data objects. my guess is your data is a string (of json). you need to convert the json to a data array.

Answer 2

Ok, I got it fixed as:

dataSource = {
    pageSize: 10,
    overflowSize: 100,

    getRows: (params: any) => {
        this.returnRows(params.startRow, params.endRow).subscribe(data => {
            var convertedDataToArray = JSON.parse(data);

             var lastRow = -1;

             params.successCallback(convertedDataToArray, lastRow);

        });
    }
}

Answer 3

I was getting the same error using React. This is the answer that pops up when looking for the error so I'll reply here since ag-grid is similar for both React and Angular.

---

In my case it was because I was trying to assign an object to the grid rather than an array. Because of Redux's immutability requirement I was doing this:

Object.assign({}, items)

when it should have been like this:

Object.assign([], items)

Answer 4

I just came across this issue. I am using "ag-grid-angular": "^18.1.0". Added onGridReady event to populate the grid data for which I added property (gridReady)="onGridReady($event)" in ag-grid-angular tag.

When I was trying to populate the data it was showing the error as mentioned above.

After trying few things I added agGrid: AgGridNg2; variable and imported the reference and it started working fine. Code spinet is as attached.

export class AppointmentComponent implements OnInit { @ViewChild('agGrid') agGrid: AgGridNg2;