ag-grid-angular: Error TypeError: rowData.forEach is not function

Question

Trying to incorporate ag-grid-angular in my project. I have succeeded in getting it to work with static data with filtering and sorting.

I am failing at setting it up with Dynamic data in async right now.

<ag-grid-angular 
style="width: 1100px; height: 1000px;" 
class="ag-theme-balham" 
[enableSorting]="true"
[enableFilter]="true" 
id ="mygrid"
[animateRows]="true"
[rowData]="rowss | async"
[columnDefs]="columnDefs"
>   
</ag-grid-angular>

In component.ts:

public rowss: any = null;

this.rowss = this.Service.getReport(this.model)

I have set the columns statically right now

columnDefs = [
        {headerName: 'Make', field: 'make' },
        {headerName: 'Model', field: 'model' },
        {headerName: 'Price', field: 'price'}
    ];

In Service.ts:

getReport( request: ReportModel ) {
            return this.http.get( this.URL + super.jsonToQueryParam( request ) ).map(( response: Response ) => response.json() );
        }

I am getting this error message:

enter image description here

ng:///ProdCtnReportModule/ProdCtnReportComponent.ngfactory.js:100 ERROR TypeError: rowData.forEach is not a function
    at ClientSideNodeManager.recursiveFunction (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:193)
    at ClientSideNodeManager.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:65)
    at ClientSideRowModel.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideRowModel.js:483)
    at GridApi.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/gridApi.js:156)
    at Function.ComponentUtil.processOnChange (webpack-internal:///./node_modules/ag-grid/dist/lib/components/componentUtil.js:120)
    at AgGridNg2.ngOnChanges (webpack-internal:///./node_modules/ag-grid-angular/dist/agGridNg2.js:363)
    at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:12623)
    at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14151)
    at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14094)
    at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14987)

The data we get from the API call is the same as the data I used when setting it up statically. The return result is an Array as requested. Please advice what needs to be done make it work.

Pratik Bhat · Accepted Answer · 2018-12-03 12:17:03Z

16

The error here is that you are trying to assign an Observable as data for ag-grid.
.map() returns an observable which you should subscribe to and provide data to ag-grid.

Something like this -

const rowss$ = this.Service.getReport(this.model);
rowss$.subscribe(rowData => {
  params.api.setRowData(rowData);
});

Keep in mind that this error -

rowData.forEach is not a function

is a very good indicator that your rowData is not an array.

1 Comment

Gregor Over a year ago

thanks for the hint, i'am using vue as framework and in my case the error was, that i declared the row data like this rowData : any = {}; and not like this rowData : any = [];

DiaMaBo · Accepted Answer · 2019-07-08 03:04:12Z

0

AgGrid - Angular 1. Backend: first of all make sure your backend is returning an array of objects For Example: List detail = new ArrayList<>();

[
    {
        "stockId": 1,
        "side": "Buy",
        "status": "Saved"
     },
     {
        "stockId": 2,
        "side": "Sell",
        "status": "Saved"
     }
]

If you're using the Enterprise version for master-detail then you need to make sure that your findById in your controller, for instance, is returning an array of 1 object [{}]

agGrid Docs: https://www.ag-grid.com/javascript-grid-master-detail/ In this link from AgGrid doc example, the callRecords field below is returning an array of objects.

getDetailRowData: function(params) {
   params.successCallback(params.data.callRecords);
}

I hope this helps.

edited Jul 8, 2019 at 3:04

answered Jul 5, 2019 at 3:08

DiaMaBo

2,3171 gold badge22 silver badges19 bronze badges

Comments

Ryan D · Accepted Answer · 2023-02-23 20:03:56Z

0

Agree with @Pratik that the message definitely leans towards the property not being an array.

However, I'll post our little bit different scenario that produced this exception for others stumbling to this post.

Our columnDefs was a private property of type any[] and we had a malformed getter method with only the method name as a signature. Was able to resolve by declaring the method as a public getter.

i.e.

This produces the exception:

private columnDefs: any[];
getColumnDefinitions() {
    return columnDefs;
}

This works correctly:

private columnDefs: any[];
public get ColumnDefinitions() {
    return columnDefs;
}

answered Feb 23, 2023 at 20:03

Ryan D

1,1231 gold badge11 silver badges20 bronze badges

Collectives™ on Stack Overflow

ag-grid-angular: Error TypeError: rowData.forEach is not function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related