Response showing undefined in angular when subscribing observables

Question

I have get method,which is fetching data from some Api and the response (I got this JSON data using postman) coming is:

{
    "content": [
        {
            "order_id": 6,
            "todayDate": "2020-07-04T15:09:40.556+0000",
            "status": "pending"
        },
        {
            "order_id": 7,
            "todayDate": "2020-07-04T15:13:16.464+0000",
            "status": "pending"
        },
        {
            "order_id": 8,
            "todayDate": "2020-07-05T13:41:13.337+0000",
            "status": "pending"
        },
        {
            "order_id": 9,
            "todayDate": "2020-07-05T13:58:21.771+0000",
            "status": "pending"
        },
        {
            "order_id": 10,
            "todayDate": "2020-07-05T14:03:07.791+0000",
            "status": "pending"
        }
    ],
    "pageable": {
        "sort": {
            "sorted": false,
            "unsorted": true,
            "empty": true
        },
        "offset": 5,
        "pageSize": 5,
        "pageNumber": 1,
        "paged": true,
        "unpaged": false
    },
    "totalElements": 39,
    "totalPages": 8,
    "last": false,
    "size": 5,
    "number": 1,
    "sort": {
        "sorted": false,
        "unsorted": true,
        "empty": true
    },
    "numberOfElements": 5,
    "first": false,
    "empty": false
}

So,normally while getting response from AJAX,I used to do, console.log(res.content) and it give me proper list of orders. But, in my service class in angular 9,I used interface to map the response,but it is not working.

import { Injectable } from '@angular/core';
import { CartItem } from '../common/cart-item';
import { Subject, Observable } from 'rxjs';
import { Order } from '../common/order';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class CartService {

  private baseUrl="http://localhost:8080/api/test";

  constructor(private httpClient:HttpClient) { }


  getOrderDetails():Observable<Order[]>{
    const orderUrl=`${this.baseUrl}`+'/getAllPendingOrders';
    return  this.httpClient.get<GetResponseOrder>(orderUrl).pipe(
      map(response => response.content.orders)
       );
  }
  
}
interface GetResponseOrder {
  content :{
     orders :Order[];
    }
}

And I subscribed in myorder.component.ts as:

  ngOnInit(): void {
    this._cartService.getOrderDetails().subscribe((res) =>{
       console.log(res);
           
    }); 
  }

But,on my console,I see, undefined while trying to see the response.So, my Order.ts file is:

export class Order {
 
    order_id:Number;
     todayDate:Date;
    status:String;
}

Answer 1

Related to your response, i think it should be

getOrderDetails():Observable<Order[]>{
 const orderUrl=`${this.baseUrl}`+'/getAllPendingOrders';
 return  this.httpClient.get<GetResponseOrder>(orderUrl).pipe(
   map(response => response.content)
   );
}

content is an array , i can't see orders, your interface becomes

interface GetResponseOrder {
 content : Order[];
}