Question

我使用Angular Material数据表，需要一个表来显示数据。

我会转换后端发送到前端的这种JSON数据格式

[{"text":"HELEO"},{"text":"HELEO"},{"text":"popopo"},{"text":":kjnkjn"},{"text":"jhjh"}]

采用此格式

[ { text: 'HELEO' },
  { text: 'HELEO' },
  { text: 'popopo' },
  { text: 'jhjh' } ]

这是我的服务：

test: nomchamp[];
gettext(): Observable<any> {

  return this.http.get<nomchamp[]>(this.url)
    .map(res => { console.log(res); return this.test = JSON.parse(res) });

}

在我的后端：

router
.route("/")
.get(function (req, res, err) {

  // Get a database reference to our posts
  var db = admin.database();
  var ref = db.ref("/");

  // Attach an asynchronous callback to read the data at our posts reference
  ref.once("value", function (snapshot) {
    var list = [];
    snapshot.forEach(function (elem) {
      list.push(elem.val());
    })

    console.log(list);
    console.log(JSON.stringify(list))

    res.send(list);


  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
    res.status(500).send(errorObject.code);
  });
});

我使用stringify可以通过res.send

发送数据

使用JSON.parse我收到此错误：

JSON.parse：JSON数据第1行第2列的意外字符

不使用解析，数据不会打印在我的数据表中。

唯一可行的情况是我在后端使用res.send(res)，但我会使用res.write(JSON.stringify(res));

Answer 1

编辑我可能会误解你的要求，如果是的话，我道歉

我相信你可以简单地用一个由JSON GET填充的对象数组来提供一个角度材料数据表，我必须为我的网站做这个并且不想要数据表的大惊小怪

<mat-table #table [dataSource]="dataSource">

      <!-- Position Column -->
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.name}} </mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="desc">
        <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.desc | slice:0:30}}... </mat-cell>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="tags">
        <mat-header-cell *matHeaderCellDef> Tags </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.tags}} </mat-cell>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.type}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="editUser(row)"></mat-row>
    </mat-table>

我添加到component.ts的变量：

    displayedColumns = ['name', 'desc', 'tags', 'type'];
    projectDataURL:string = global.url + '/api/projects';
    project:any;
    dataSource;

然后在构造函数中我有这个：

this.subscription = this.getData.getDATA(this.projectDataURL).subscribe(
            data => {
                this.dataSource = new MatTableDataSource<any>(data);
            });

最后我需要一个数据表接口：

export interface project {
    name: string;
    desc: number;
    tags: string;
    type: string;
}

虽然这并非适用于所有用例，但对我来说它工作得很好，希望这有帮助

将JSON格式转换为Array以在数据中使用

1 个答案: