Новый Angular HTTPClient получает данные ответа из Dreamfactory API - PullRequest
Новая
       51

Новый Angular HTTPClient получает данные ответа из Dreamfactory API

0 голосов
/ 01 июня 2018

Я пытаюсь написать службу Angular 6, которая подключается к DreamFactory API.

Мне удалось извлечь данные json из таблицы "brand" в базе данных, которой я позволил DreamFactory управлять.Я могу отправить запрос на получение API, поэтому нет проблем с обменом сообщениями.Ниже приведен пример: 

{
  "resource": [
    {
      "id": 1,
      "name": "Apple",
      "display_order": 1,
      "visible": true
    },
    {
      "id": 2,
      "name": "Dell",
      "display_order": 6,
      "visible": true
    },
    {
      "id": 3,
      "name": "HP",
      "display_order": 5,
      "visible": true
    },
    {
      "id": 4,
      "name": "HTC",
      "display_order": 4,
      "visible": true
    },
    {
      "id": 5,
      "name": "Samsung",
      "display_order": 2,
      "visible": true
    },
    {
      "id": 6,
      "name": "Sony",
      "display_order": 3,
      "visible": true
    }
  ]
}

Я борюсь с форматированием данных:

Как мне сопоставить поля в ответе "resource" с классом, который я создал в Angular?Я импортировал «brand.ts» в «data.service.ts».Я импортировал HTTPClient во все правильные места, такие как «app.module.ts» и «data.service.ts», и использовал его в constructor () {} и т. Д.

'.. / models / brand.ts '

export class Brand{
    id: number;
    name: string;
    displayOrder: number;
    isVisible: boolean;
}

' .. / services / data.service.ts '

...
    getBrands() {
        this.http.get(this.baseUrl + 'brand' + '?api_key=' + this.APP_API_KEY)
          .map((data: Response) => {
            return data;
          })
          .subscribe((data => {
            console.log(data);
            this.brands = data;
          })
          );
      }

...

Используя приведенный выше код в консоли, регистрируйте мои данные, как показано ниже:

ресурс: (6) […]

0: Объект {id: 1, имя: «Apple», display_order: 1,…}

1: Объект {id: 2, имя: «Dell», номер дисплея: 6,…}

2: Объект {id: 3, имя: «HP», номер дисплея: 5,…}

3: Объект{id: 4, имя: «HTC», номер дисплея: 4,…}

4: Объект {id: 5, имя: «Samsung», номер дисплея: 2,…}

5: Object {id: 6, name: "Sony", display_order: 3,…}

длина: 6 ...

Как мне изменить мой код для сопоставления данных с моим классом?Например, поле «display_order» должно отображаться на мое свойство класса Angular «displayOrder» и т. Д. Любая помощь будет полезна, поскольку я новичок в Angular.

Ответы [ 3 ]

0 голосов
/ 02 июня 2018 
this.http.get<Array<Brand>>('/whateverurl).subscribe( ...

не забудьте импортировать класс / интерфейс бренда

РЕДАКТИРОВАТЬ: если это массив, вам нужно <Array<Brand>>

0 голосов
/ 06 июня 2018

Спасибо за предложения.Это был «ресурсный» ключ в JSON, который требовал рассмотрения! 

{
  "resource": [
    {
      "id": 1,
      "name": "Apple",
      "display_order": 1,
      "visible": true
    },
    {
      "id": 2,
      "name": "Dell",
      "display_order": 6,
      "visible": true
    },
    {
      "id": 3,
      "name": "HP",
      "display_order": 5,
      "visible": true
    },
    {
      "id": 4,
      "name": "HTC",
      "display_order": 4,
      "visible": true
    },
    {
      "id": 5,
      "name": "Samsung",
      "display_order": 2,
      "visible": true
    },
    {
      "id": 6,
      "name": "Sony",
      "display_order": 3,
      "visible": true
    }
  ]
}

Мне удалось добиться успеха, используя следующее:

brand.ts 

export interface Brand {
  id: number;
  name: string;
  display_order: number;
  visible: boolean;
}

data.service.ts 

  getBrands(): Observable<Brand[]> {
    return this.http.get<Brand[]>(this.baseUrl + 'brand' + '?api_key=' + this.APP_API_KEY)
    .pipe(
      map(res => res['resource'])
    );
  }
0 голосов
/ 01 июня 2018

Добавьте конструктор к вашему типу класса следующим образом: 

export class Brand {
  id: number;
  name: string;
  displayOrder: number;
  isVisible: boolean;

  constructor(item) {
    this.id = item.id;
    this.displayOrder = item.display_order;
    // set rest of variables
  }
}

Затем направьте ответ и создайте новый объект, который сопоставляет ваши поля с правильными полями, например: 

  getBrands(url: string): Observable<Brand[]> {
    return this.http.get(url).pipe(map((data: any[]) => {
      const res: Brand[] = [];
      data.map((item) => {
        res.push(new Brand(item));
      });
      return res;
    }));
  }

Я настроил это как возврат от службы, так как вы должны вернуть это Observable к коду компонента из службы и затем подписаться там.Это выведет массив Brand с сопоставленными полями

Установка полей в конструкторе позволит вам установить в поле displayOrder входящие данные display_order.

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

...