将 JSON 格式转换为数组以在数据中使用答案

【问题标题】：Convert JSON format to Array to use in data将 JSON 格式转换为数组以在数据中使用
【发布时间】：2018-08-04 03:21:46
【问题描述】：

我正在使用需要表格来显示数据的 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 列出现意外字符

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

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

【问题讨论】：

您的 JSON = 字符串对吗？因此，JSON.parse(thatString) 将生成一个与您需要的对象相似的对象。也许问题是你没有得到 JSON，而是已经是 JSON.parsed 的数据——这就是 JSON.parse 失败的原因——因为 JSON.parse 只接受要解析的字符串

标签： javascript json angular stringify

【解决方案1】：

在你的 list 变量上，你可以试试这个：

let list = [];
snapshot.forEach(function (elem) {
  list.push(elem.val());
});

list = JSON.stringify(list);
list = JSON.parse(list);

res.send(list);

基本上，你先字符串化，然后解析它；这样，您就可以去掉每个对象内键值对中每个 key 上的双引号。

【讨论】：

但后端没有“测试”变量。 Wii使用测试？
哎呀，这是一个错误。它是固定的。 test 应该是 list

【解决方案2】：

编辑我可能误解了你的要求，如果是这样，我很抱歉

我相信你可以简单地用一个由 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;
}

虽然这并不适合所有用例，但对我来说效果很好，希望对您有所帮助

【讨论】：