Как загрузить данные JSON в класс или массив классов в Angular? - PullRequest
Новая
       20

Как загрузить данные JSON в класс или массив классов в Angular?

0 голосов
/ 19 декабря 2018

В основном я хочу загрузить свой ответ JSON в массив классов, но из-за того, что Angular http устарел, у меня возникли некоторые проблемы с HttpClient, во всех других версиях, которые я видел, используется метод .map, которыйбольше не присутствует (только после канала).

Мой ответ JSON выглядит следующим образом: 

{
  "list": [
    {
      "Id": 1002469,
      "Summary": null,
      "StartDate": "2018-12-11T23:00:00",
      "EndDate": "2018-12-31T23:00:00",
...

У меня есть два класса: один ListSearch и класс List.

Ниже приведен мой код для запроса API: 

getList() {
    return this.http.get('http://127.0.0.1:5002/list/' + this.token)
    ;
  }

this.apisService.getList()
      .subscribe((list: any) => {
        this.listSearch = list;
        console.log(list);
        },
        error => console.log('Error.')
      );

Это отлично выводит мой ответ JSON.Но когда я попытаюсь поместить все это в класс или массив, он будет неопределенным или получит данные примерно так: 

ListSearch {0: "{", 1: "
", 2: "↵", 3: " ", 4: " ", 5: """, 6: "l", 7: "i", 8: "s", 9: "t", 10: """, 11: ":", 12: " ", 13: "[", 14: "
", 15: "↵", 16: " ", 17: " ", 18: " ", 19: " ", 20: "{", 21: "
", 22: "↵", 23: " ", 24: " ", 25: " ", 26: " ", 27: " ", 28: " ", 29: """, 30: "I", 31: "d", 32: """, 33: ":", 34: " ", 35: "1", 36: "0", 37: "0", 38: "2", 39: "4", 40: "6", 41: "9", 42: ",", ...

Мой код для результата выше: 

this.apisService.getList()
      .subscribe((list: ListSearch) => {
        const a = new ListSearch().deserialize(list);
        console.log(a);
        },
        error => console.log('Error.')
      );

Есть ли у вас какие-либо предложения, как я могу сделать эту работу?

ОБНОВЛЕНИЕ:

Сделаны следующие интерфейсы (используя это: https://jvilk.com/MakeTypes/):

export interface List {
    list?: (ListEntity)[] | null;
  }
  export interface ListEntity {
    Id: number;

И следующий код по-прежнему возвращает undefined ... 

this.apisService.getList()
  .subscribe((list: ListSearch) => {

    console.log(list.list);

UPDATE2:

Следующий код возвращает первыйперсонаж json " {" 

this.apisService.getList()
      .subscribe((list: List[]) => {

        console.log(list[0]);
...

UPDATE3:

Я думаю, что я близок, чтобы понять это правильно: 

  this.apisService.getList()
  .subscribe((data: ListSearch) => this.listSearch = {
    list: data['list']
    },

Теперь возвращается: 

{list: undefined}list: undefined__proto__: Objectconstructor: ƒ ...

****************** РЕШЕНИЕ: ******************

Наконец-то! Я создал простой объект: 

a: Object;

Затем сделал следующее: 

this.apisService.getList()
    .subscribe((data: string) => {
        this.a = JSON.parse(data);
        this.listSearch = <List>this.a;

И это работает как шарм!

Ответы [ 3 ]

0 голосов
/ 20 декабря 2018

Сначала следует создать интерфейс модели для этих классов, затем 

this.apisService.getList()
  .subscribe((list: ListSearch[]) => {
    const value = list;
    console.log(value);
    },
    (error: any) => console.log('Error.')
  );
0 голосов
/ 01 марта 2019

Правильный путь:

Интерфейс: 

export interface IEmployee {
    id: number,
    name: string,
    age: number
}

Сервис : 

getEmployees(): Observable<IEmployee[]>{
        return this.http.get<IEmployee[]>(this._url);
    }

Компонент : 

public employees = [];

ngOnInit() {
    this._employeeService.getEmployees()
    .subcribe(
        data => this.employees = data
    );
}
0 голосов
/ 19 декабря 2018

Поскольку ваш JSON-файл начинается с {, HTTPClient читает его как отдельный объект.Измените код услуги на ниже: 

getList() {
    return this.http.get('http://127.0.0.1:5002/list/' + this.token);
  }

this.apisService.getList()
  .subscribe((list: any) => {
    this.listSearch = list.list;
    console.log(list);
    },
    error => console.log('Error.')
  );
...