(TypeScript) "TypeError: Cannot read properties of undefined (reading 'map')"

Issue

I am developing an application in which I have a recycle garbage can system. When it's too full, I'd like to be able to load the items 10 by 10 for example, but I've got a mapping error. Here's the error I'm getting and I don't know how to solve it:

TypeError: Cannot read properties of undefined (reading 'map')

Thank you in advance if you take the time to answer.

Server side: There is my Controller:

    #[Route(
        name: 'get_all_fiche_deleted_for_user', path: '/deleted', allowed_methods: [HttpMethod::GET], middleware: [AuthMiddleware::class]
    )]
    public function getAllFicheDeletedForUser(EntityManager $entity_manager, Request $request, int|Utilisateur $utilisateur = null): array
    {
        $queryParam = $request->getQueryParams();
    
        $limit = isset($queryParam['limit']) ? $queryParam['limit'] : 2;
        $offset = isset($queryParam['offset']) ? $queryParam['offset'] : 0;

        $utilisateurRequest = $request->getAttribute('utilisateur');

        if (is_int($utilisateur)) {
            $utilisateur = $entity_manager->getRepository(Utilisateur::class)->find($utilisateur);
        }

        $result = $entity_manager->getRepository(Panier::class)->getAllFichesdeleted($limit, $offset, $utilisateurRequest);
    
        return $result; 
    }

Client side: Here is my Service:

  getAllPanierFichesDeletedForUser(limit: number, offset: number): Observable<Panier[]> {
    const params = new HttpParams()
    .set('limit', limit.toString())
    .set('offset', offset.toString());
    
    return this.httpClient.get(
      this.getDomainApi() + '/v1/panier/deleted', this.getHttpOptions()
    ).pipe(
      map((response: any) => {
        return response.data.map((item: any) => deserialize(Panier, item));
      })
    );
  }

There is the result of a console.log(response):

Finally, there is my component:

  ngOnInit() {
    this.loadDeletedFiches();
  }

  loadDeletedFiches() {
    this.panierService.getAllPanierFichesDeletedForUser(10, 0).subscribe((paniers: Panier[]) => {
      console.log('Données reçues :', paniers);
      this.paniers = paniers;
      this.isLoading = false;
    });
  }

Solution

Please change to code to, numeros is the property inside the response that contains an array, this is the main data that we want!

map is a javascript function that belongs to an array types, it will transform the array into a new array, depending on the mapFunction you have provided as input (item: any) => deserialize(Panier, item)!

getAllPanierFichesDeletedForUser(limit: number, offset: number): Observable<Panier[]> {
    const params = new HttpParams()
    .set('limit', limit.toString())
    .set('offset', offset.toString());
    
    return this.httpClient.get(
      this.getDomainApi() + '/v1/panier/deleted', this.getHttpOptions()
    ).pipe(
      map((response: any) => {
        return response.numeros.map((item: any) => deserialize(Panier, item));
      })
    );
  }

Answered By - Naren Murali