Преобразование формата JSON в массив для использования в данных

Я использую таблицу данных 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: неожиданный символ в строке 1 столбца 2 данных JSON

Без использования parse данные не печатаются в моей таблице данных.

Единственный случай, когда это работает, - это когда я использую res.send(res) в бэкэнде, но я бы использовал res.write(JSON.stringify(res));


javascript json angular stringify
person Hamza Haddad    schedule 24.02.2018    source источник
comment
у вас есть JSON = строка, верно? Итак, JSON.parse(thatString) приведет к объекту, который будет похож на тот, который вам нужен. Возможно, проблема в том, что вы получаете не JSON, а данные, которые уже JSON.parsed, поэтому JSON.parse не работает, потому что JSON.parse принимает только строки для анализа.   -  person Jaromanda X    schedule 24.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

В вашей переменной list вы можете попробовать следующее:

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

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

res.send(list);

По сути, вы сначала строите, а затем анализируете его; таким образом вы избавитесь от двойных кавычек для каждого key в парах ключ-значение внутри каждого объекта.

person MonkeyOnARock    schedule 24.02.2018
comment
Но в бэкэнде нет тестовой переменной. Тест использования Wii? - person Hamza Haddad; 24.02.2018
comment
Упс, это была ошибка. Это фиксированный. test должно быть list - person MonkeyOnARock; 24.02.2018

arrow_upward
0
arrow_downward

Изменить Возможно, я неправильно понял, о чем вы просите, если да, то приносим свои извинения.

Я считаю, что вы можете просто передать данные angular материала с массивом объектов, заполненным 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;
}

Хотя это не идеально для всех случаев использования, для меня это сработало отлично, надеюсь, это поможет

person Cacoon    schedule 24.02.2018