Uhlová 4 zobrazuje json v tabuľke - json, uhlová, služba, uhlová-materiál, uhlovo-cdk

Mám nasledujúce JSON:

{
"0": {
"open": 93.3,
"high": 96,
"low": 93.3,
"close": 95.04,
"volume": 358172,
"score": "100",
"symbol": "ZBRA",
"company_name": "Zebra Technologies Corp.",
"company_sector": "Industrial Goods"
},
"1": {
"open": 19.1396,
"high": 19.5578,
"low": 18.7612,
"close": 19.3587,
"volume": 185112,
"score": "100",
"symbol": "ZEUS",
"company_name": "Olympic Steel Inc.",
"company_sector": "Industrial Goods"
},
"2": {
"open": 40.4208,
"high": 41.1223,
"low": 39.9614,
"close": 40.0058,
"volume": 6950648,
"score": "100",
"symbol": "ZION",
"company_name": "Zions Bancorporation",
"company_sector": "Financial"
},
"3": {
"open": 6.86,
"high": 7.27,
"low": 6.86,
"close": 7.09,
"volume": 1391657,
"score": "100",
"symbol": "ZIOP",
"company_name": "ZIOPHARM Oncology, Inc.",
"company_sector": "Healthcare"
},
"4": {
"open": 5.38,
"high": 5.41,
"low": 5.19,
"close": 5.21,
"volume": 345071,
"score": "100",
"symbol": "ZIXI",
"company_name": "Zix Corporation",
"company_sector": "Technology"
},
"5": {
"open": 1.2,
"high": 1.2,
"low": 1.15,
"close": 1.15,
"volume": 136149,
"score": "100",
"symbol": "ZN",
"company_name": "Zion Oil & Gas, Inc.",
"company_sector": "Basic Materials"
},
"6": {
"open": 2.85,
"high": 2.9,
"low": 2.82,
"close": 2.86,
"volume": 6989286,
"score": "100",
"symbol": "ZNGA",
"company_name": "Zynga, Inc.",
"company_sector": "Technology"
}
}

Overil som, že je vo formáte json, a mám tento model, ktorý ho predstavuje:

export interface User {
open: number;
high: number;
low: number;
close:number;
volume: number;
score: string;
symbol:string;
company_name:string;
company_sector:string;

}

služba pre JSON funguje podľa plánu, ale keď sa pokúsim zobraziť JSON v takejto tabuľke:

<font color="white">
<div class="example-container mat-elevation-z8">

<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%">
Symbol </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.symbol}} </mat-cell>
</ng-container>
<ng-container matColumnDef="score">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Score </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.score}} </mat-cell>
</ng-container>
<ng-container matColumnDef="open">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Open </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.open}} </mat-cell>
</ng-container>
<ng-container matColumnDef="high">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> High </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.high}} </mat-cell>
</ng-container>
<ng-container matColumnDef="low">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Low </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.low}} </mat-cell>
</ng-container>
<ng-container matColumnDef="close">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 25.5%"> Close </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.close}} </mat-cell>
</ng-container>
<ng-container matColumnDef="company_name">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Company Name </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.company_name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="company_sector">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Company Sector </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.company_sector}} </mat-cell>
</ng-container>
<ng-container matColumnDef="volume">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width = 12.5%"> Volume </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.volume}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</font>

Snažil som sa ho zobraziť ako tabuľku s niektorými sprievodcami na internete, ale nemohol som uspieť, vždy zobrazuje prázdnu tabuľku, viete, v čom môže byť problém?

upraviť: tu je súbor ts komponentu:

import { Component, ViewChild } from "@angular/core";
import { UserService } from "../../services/userservice/user.service";
import { User } from "../../models/user.model";
import { MatTableDataSource, MatSort } from "@angular/material";
import { EasyService } from "../../services/easysearch/easysearch.service";


@Component({
selector: "usertable",
templateUrl: "./usertable.component.html",
styleUrls: ["./usertable.component.css"]
})
export class UsertableComponent   {
userData = null;
dataSource = new MatTableDataSource(this.userData);
displayedColumns = ["open","high", "low", "close", "volume", "score",
"symbol","company_name", "company_sector"];



constructor(private userService: UserService) {
userService.getUser().subscribe(
data => {
this.userData = data;
this.dataSource.data = this.userData;
});
}



@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
this.dataSource.sort = this.sort;
}



}

/*export class UserDataSource extends DataSource<any> {
constructor(private userService: UserService) {
super();
}
connect(): Observable<User[]> {
return this.userService.getUser();
}

@ViewChild(MatSort) sort: MatSort;




disconnect() {}
}*/

Tu je služba:

 import { Injectable }   from "@angular/core";
import { HttpClient }   from "@angular/common/http";
import { Observable }   from "rxjs/Observable";
import "rxjs/add/operator/map";
import { User } from "../../models/user.model";
@Injectable()
export class EasyService {
private serviceUrl = "http://193.106.55.148:8080/easysearch?budget=1";

constructor(private http: HttpClient) { }

getUser(): Observable<User[]> {
return this.http.get<User[]>(this.serviceUrl);
}


}

odpovede:

Odozva, ktorú dostanete http nie je pole JSON, ale objekt JSON. použitie Object.values previesť odpoveď do poľa.

userService.getUser().subscribe(
data => {

this.dataSource.data = Object.values(data);
});