How To Properly Format This Data For Material Table [dataSource]?
I can get the data from the API to show using *ngFor='let earning of symbolEarnings.earnings'
>{{earning.actualEPS}}
Now I'm trying to use the mat-table so it's uniform with the rest of my app.
Now if I use symbolEarnings
which is an object Object in the [dataSource], I get the error
Provided data source did not match an array, Observable, or DataSource
Now what I've been doing for the past hours is trying to convert to an array. As reference, this is the data.
{"symbol":"AAPL","earnings":
[
{"actualEPS":2.91, "EPSReportDate":"2018-11-01"},
{"actualEPS":2.34,"EPSReportDate":"2018-07-31"}
]}
So I use this to get symbolEarnings
getEarning(): void {
const id = this.route.snapshot.paramMap.get("id");
this.svc.getEarningById(id).subscribe(data => {
this.symbolEarnings = data;
which works fine when I do 'let x of symbolEarnings.earnings' {{x.actualEPS]]
The data is currently an object Object, so I get the error highlighted above.
I try to convert the earnings part into an array to no avail.
this.test = this.symbolEarnings.earnings;
or this.testArray = Object.keys(this.test).map(i => this.test[i]);
The interesting thing is that testArray
works for [dataSource]
but I need to do *ngFor='let y of testArray' [dataSource]="testArray"
to get the column then use <td mat-cell>{{y.actualEPS}}</td>
which produces result but it's repeating on multiple table.
For example, EPS: 2, 2, 2 EPS: 3, 3, 3 EPS: 4, 4, 4 rather than EPS: 2, 3, 4
So I kinda sorta got it kinda working, but I clearly need some help with this. Let me know if you have any questions! Thank you
Answer
I got it to work. Turns out it was *matCellDef="let element">{{element.actualEPS}}
, where that's only referencing MatTableDataSource. So I used dataSource = new MatTableDataSource();
then
getEarning(): void {
const id = this.route.snapshot.paramMap.get("id");
this.svc.getEarningById(id).subscribe(data => {
this.symbolEarnings = data;
this.symbolEarningsDetail = this.symbolEarnings.earnings;
this.dataSource.data = this.symbolEarningsDetail;
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM