определить интерфейс для ответа объекта json

Question

Мой API возвращает следующий ответ JSOn:

{
  key1: [
    name: "bob",
    gender: "male",
    children: [
      {
        name: "tom",
        gender: "male"
      },
      {
        name: "charley",
        gender: "male"
      }
    ]
  ],
  key2: {
    bob: 45,
    tom: 15,
    charley: 10
  }
}

Я объявил тип 'any' для ответа в моем component.ts:

export class personComponent implements OnInit {
   personData: any[];
}

this._personService.getPersonData().subscribe(personData = > {
   this.data = personData;
}, error => this.errorMessage = <any>error, () => {
   this.personObject = this.data.key1; // Here it throws error - 'key1' doesnt exists on type any[];
})

Я знаю способ созданияинтерфейс для объектов и массива ... но как я могу создать интерфейс для вывода JSON.

Может кто-нибудь, пожалуйста, помогите мне здесь.

Answer 1

В вашем модуле импортируйте HttpClientModule вместо старого HttpModule.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [ HttpClientModule ]
})
[...]

Ваш вывод выглядит немного странно.Интерфейс может выглядеть следующим образом:

export interface PersonData {
  [key: string]: {
    name?: string;
    gender?: string;
    children?: Array<{name: string, gender: string}>
    [key: string]: any; // optional
  }
}

В вашем сервисе используйте HttpClient, который обеспечивает синтаксический анализатор типов

import { HttpClient } from '@angular/common/http';
[...]
constructor(private http: HttpClient) {}

getPersonData(): Observable<PersonData> {
  return this.http.get<PersonData>(url);
}