Угловое приведение строки json к типизированному массиву

Question

SampleDataController:

[HttpGet("GetAllItems")]
public async Task<IActionResult> GetAllItems()
{
    return Json(await _storeContext.Table.AsQueryable().ToListAsync());
}

DataService:

export class DataService {

  constructor(private http: HttpClient) { }

  GetAllItems() {
    return this.http.get("https://localhost:44381/api/SampleData/GetAllItems");
  }
}

Компонент:

import { Component } from '@angular/core';
import { DataService } from '../store.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  public itemsList: Item[];

  constructor(private logger: DataService) {}

  GetItems() {
    this.logger.GetAllItems().subscribe(
      data => this.itemsList = <Item[]>JSON.parse(JSON.stringify(data))
    )
  }
}

export interface Item {
  Id: number;
  Name: string;
  Surname: string;
}

Компонент html:

<button mat-button (click)="GetItems()">GetItems!</button>

<li *ngFor="let item of itemsList">
  <span>
    <br />
    {{item.Name}}
    <br />
    {{item.Surname}}
  </span>
</li>

После нажатия на кнопку GetItems() возвращает массив объектов.Я думал, что data => this.itemsList = <Items[]>JSON.parse(JSON.stringify(data)) должен привести к массиву Item, и я должен получить Item[] массив.Как правильно преобразовать JSON в типизированный массив в TypeScript?

Пример данных Json:

[
    {
        "id": 3,
        "name": "1",
        "surname": "2         "
    },
    {
        "id": 4,
        "name": "1",
        "surname": "2         "
    },
    {
        "id": 5,
        "name": "1",
        "surname": "2         "
    },

Answer 1

Введите HTTP-запрос

export class DataService {

  constructor(private http: HttpClient) { }

  GetAllItems(): Observable<Item[]> {
    return this.http.get<Item[]>("https://localhost:44381/api/SampleData/GetAllItems");
  }
}

и выполните

import { Component } from '@angular/core';
import { DataService } from '../store.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

    export class AppComponent {

      public itemsList: Item[];

      constructor(private logger: DataService) {}

      GetItems() {
        this.logger.GetAllItems().subscribe(
          (data: Item[]) => this.itemsList = data
        )
      }
    }

export interface Item {
  Id: number;
  Name: string;
  Surname: string;
}

В любом случае, есть еще несколько рекомендаций.Пожалуйста, используйте общие правила именования, используйте lowerCamelCase для методов и членов.Также избегайте подписки (используйте вместо этого асинхронный канал) или хотя бы отмените подписку.

Answer 2

Используйте метод Ok вместо Json, чтобы вернуть сериализованные объекты, поскольку его дополнительная функция завершена:

[HttpGet("GetAllItems")]
public async Task<IActionResult> GetAllItems()
{
    return this.Ok(await _storeContext.Table.AsQueryable().ToListAsync());
}

В угловой стороне по умолчанию предполагается, что тело ответа содержит JSON, поэтомувы можете переоборудовать свой сервис в следующее , как описано в документах :

export class DataService {

  constructor(private http: HttpClient) { }

  GetAllItems(): Observable<Item[]> {
    return this.http.get<Item[]>("https://localhost:44381/api/SampleData/GetAllItems");
  }
}

Из-за этого вам не нужно ничего десериализовать вручную (например, используя JSON.parse), так как угловые позаботятся об этом шаге.