I am trying to implement "ag-Grid" into my project and I'm trying to populate it by fetching data from a local JSON mock file.
Considering it's my first time using "ag-Grid" and I'm at the very begining with my Angular 6 experience this is what I've come with so far.
This is the structure of my JSON Object
{
"response": {
"code": 200,
"body": {
"email": "[email protected]",
"displayName": "User 1",
"actions": [
{
"note": "some note",
"author": {
"displayName":"James Potter"
},
"createdAt": "1520262442000",
"updateAt": "20180203073000"
},
{
"note": "Some note",
"author": {
"displayName":"Bilbo Bagins"
},
"createdAt": "1496672283000",
"updateAt": "20180203073000"
}
]
}
}
}
This is my component
export class MockupViewComponent implements OnInit {
columnDefs = [
{headerName: 'Name', field: 'response.body.actions.author.displayName'},
{headerName: 'Status', field: 'response.body.actions.note'},
{headerName: 'Log Date', field: 'response.body.actions.createdAt'},
{headerName: 'Update Date', field: 'response.body.actions.updateAt'}
];
rowData: any;
constructor( public mockGetService: MockupParseService ) {
}
ngOnInit() {
this.mockGetService.getJSON().subscribe(data => {
this.rowData = data;
});
}
}
This is my JSON get service
export class MockupParseService { // ReadMockService
constructor(private http: HttpClient) {
}
getJSON(): Observable<any> {
return this.http.get('./assets/mockup/history.json');
}
}
And finally, this is my template
<ag-grid-angular
style="width: 1000px; height: 500px;"
enableSorting="true"
enableFilter="true"
class="ag-theme-balham"
[rowData]="rowData | async"
[columnDefs]="columnDefs"
></ag-grid-angular>
What I'm having trouble with is rowData. Just treat it as a normal {{rowData | async}} interpolation for the sake of it.
I understand that async sort of expects an array and it's getting an Object, hence the error. I tried removing async with no positive result. I've tried to get the JSON file straight from the component and a number of other solutions with no relative success. I'm pretty sure it's either a matter of concepts I'm missing or it's just a distraction mistake.
The async pipe doesn't expect a data type, it's used for dealing with (usually) observables of async data, such as an HTTP call. If you subscribe to the observable, you'll need to unsub on the components destroy lifecycle hook to prevent memory leaks which the async pipe takes care of for you.
You can use the map operator to return the actions property in the initial http call:
getJSON(): Observable<any> {
return this.http.get('./assets/mockup/history.json').pipe(map(res => res.actions))
}
Or subscribe to the data as you are, but pass in the right prop:
ngOnInit() {
this.mockGetService.getJSON().subscribe(data => {
this.rowData = data.actions;
});
}
When you subscribe to the observable in the component, don't use the async pipe in the template. Only use it for passing the observable to the input directly.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments