Как установить файл json в массив объекта в Angular

Question

как установить файл json в массив моего объекта "Клиент"?У меня есть json, который выглядит следующим образом:
Clients.json

{
   "clients": [
   {
      "firstName": "nameA",
      "lastName": "lastA",
      "doctorsName": "domm",
      "procedure": "consultation",
      "registrationDate": "new Date(2019, 10, 12)",
      "isAlreadyServed": "false"
   },
   {
      "firstName": "nameB",
      "lastName": "lastB",
      "doctorsName": "domm",
      "procedure": "procedureA",
      "registrationDate": "new Date(2019, 10, 12)",
      "isAlreadyServed": "false"
   },
   {
      "firstName": "nameC",
      "lastName": "lastC",
      "doctorsName": "doctorA",
      "procedure": "procedureC",
      "registrationDate": "new Date(2019, 10, 12)",
      "isAlreadyServed": "false"
   },

   ...
   ...
   ...

И как я могу установить его в массив объекта Client.service.ts

clients: Client[] = this.http.get('path.Clients.json') // ??

Answer 1

Поскольку ваши данные находятся на стороне клиента в виде файла JSON.Хотя вы можете использовать HttpClient, здесь есть другое решение для этого.

Вы можете напрямую импортировать JSON как константу и присвоить ему clients с TS 2.9 ( документы ).

import Clients from 'path/to/client/json';

clients: ClientsJson = Clients;

, где интерфейс ClientsJson будет выглядеть следующим образом.

export interface ClientsJson {
    clients: Client[];
}

export interface Client {
    firstName: string;
    lastName: string;
    doctorsName: string;
    procedure: string;
    registrationDate: Date;
    isAlreadyServed: boolean;
}

Вот рабочий пример для StackBlitz .

Answer 2

Сначала необходимо определить интерфейс, соответствующий структуре вашего объекта:

public interface ClientConfiguration {
    firstName: string;
    lastName: string;
    doctorsName: string;
    // And so on...
}

Затем, как и в показанном вами коде, вам необходимо ввести метод http.getчтобы получить правильный вывод.

public getConfiguration(): Observable<Array<ClientConfiguration>> {
    return this.http.get<Array<ClientConfiguration>>('path/to/client/json');
}

Поскольку мой метод getConfiguration() возвращает наблюдаемое, вам необходимо подписаться на него в ваших компонентах или службах:

@Component({ ... })
export class MyComponent implements OnInit {
    public ngOnInit(): void {
        this.getConfiguration().subscribe(result: Array<ClientConfiguration> => {
             this.clientConfiguration = result;
        });
    }

    public getConfiguration(): Observable<Array<ClientConfiguration>> {
        return this.http.get<Array<ClientConfiguration>>('path/to/client/json');
    }
}

ВыВы можете прочитать больше о HttpClient в официальной документации Angular: https://angular.io/guide/http

Надеюсь, это поможет.