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;
}

Fateh Mohamed · Accepted Answer · 2020-07-10 16:09:36Z

3

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[];
}

edited Jul 10, 2020 at 16:09

answered Jul 10, 2020 at 15:59

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AB21 Over a year ago

A function whose declared type is neither 'void' nor 'any' must return a value.

Collectives™ on Stack Overflow

Response showing undefined in angular when subscribing observables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related