How to load data in to rowData in ag-grid? - aurelia

Question

I have the following code in my html-class:
<ag-grid-aurelia #agGrid class="ag-theme-balham" style="width: 100%; height: 350px;" #agGrid grid-ready.call="onGridReady()"
grid-options.bind="filesThatAreMalwareOptions">
<ag-grid-column header-name="date" field="date" width.bind="300"></ag-grid-column>
<ag-grid-column header-name="fileHash" field="fileHash" width.bind="300"></ag-grid-column>
<ag-grid-column header-name="fileName" field="fileName" width.bind="300"></ag-grid-column>
<ag-grid-column header-name="fileSize" field="fileSize" width.bind="300"></ag-grid-column>
<ag-grid-column header-name="mimeType" field="mimeType" width.bind="300"></ag-grid-column>
<ag-grid-column header-name="Malware" field="Malware" width.bind="300"></ag-grid-column>
<ag-grid-column header-name="Virustotal-Link" field="Virustotal-Link" width.bind="300"></ag-grid-column>
</ag-grid-aurelia>
And the following code in my TypeScript-class:
filesThatAreMalwareOptions:GridOptions = {
rowData: []
};
getValueFromRequest(queryEndpoint){
this.http
.fetch(queryEndpoint, {
mode: "cors"
})
.then(result => result.json()
).then(body => {
if (queryEndpoint == "TestFileData"){
this.filesThatAreMalwareOptions.rowData = JSON.parse(body);
}
});
If I want to load the data from the endpoint of my service the gird display "No rows to show". If I hardcode the rowData like:
filesThatAreMalwareOptions:GridOptions = {
rowData: [ {date: '02.04.1990', fileHash: 'X', fileName: 'X', fileSize: 3245, mimeType: 'PDF'}]
};
The data is displayed in the grid. Where is the problem with loading the data from the service?

Answer 1

Instead of setting the property rowData directly, you will need to use an api call:
this.filesThatAreMalwareOptions.api.setRowData(JSON.parse(body));
See the api reference:
https://www.ag-grid.com/javascript-grid-api/