Свойство «данные» не существует для типа «Объект»

Question

Я получаю эту ошибку на своем угловом 6 проекте, когда пытаюсь получить данные из моего API. Это мой файл API JSON;

{"data":
[{"category_name":"Women Ready Made","slug":null,"image_url":"education.jpg","products": 
[{"productName":"Kampala 
Shorts","description":"Beautiful Handwoven Kampala Shorts","imageUrl":"C:\\codes\\Tradsonline\\img\\image1.jpg","price":2500,"discount":10},{"productName":"Flowing White Agbada","description":"Flowing white agbada with beautiful design.","imageUrl":"C:\\codes\\Tradsonline\\img\\image3.jpg","price":22000,"discount":15}]},{"category_name":"Men's Ready Made","slug":null,"image_url":"education.jpg","products":[{"productName":"Ankara Jacket","description":"Ankara Jackets with pockets.","imageUrl":"C:\\codes\\Tradsonline\\img\\image2.jpg","price":5000,"discount":15},{"productName":"Women Ankara Gown","description":"Women Ankara gown with beautiful design.","imageUrl":"C:\\codes\\Tradsonline\\img\\image4.jpg","price":8000,"discount":0}]},{"category_name":"Ankara Gowns","slug":null,"image_url":"education.jpg","products":[]}]}

Это мой сервис

getCategories(): Observable<Category[]> {
  return this.http.get(this.base_url + 'categories')
    .pipe(map(res => {
       return res.data; //this is where the error happens
}));

это мой импорт на моем сервисе

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Product } from '../models/product';
import { Category } from '../models/category';

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

Откуда берется ошибка?

Answer 1

Если вы не укажете параметр универсального типа для вызова http.get, тогда предполагается object, то есть тип, передаваемый в map.object не имеет свойства с именем data (которое вы вызываете), следовательно, ошибка переноса времени.

Измените его, чтобы определить возвращаемую структуру в ограничении универсального типа при вызове http.get<T>.

getCategories(): Observable<Category[]> {
    return this.http.get<{data: Category[]}>(this.base_url + 'categories')
        .pipe(map(res => {
          return res.data; // now .data is known and is expected to contain Category[]
        }));
}