Err: Cannot find a differ supporting object '[object Object]' of type 'object'

Question

I'm trying to show the user's orders in is a profile page, but receiving that error.

For now, Im just trying to show the user's first name

User Profile Orders routing:

// User Profile (Orders)
userRouter.get('/profile/orders',verify,(req,res) =>{
  OrderDetails.find({UserId: req.user._id})
  .then(user => {
      res.status(200).json({
          Orders:user
      });

  });
});

User service:

getProfileOrders(){

  const token = localStorage.getItem('id_token');
  let headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'auth-token': token
  });

  const httpOptions = {
    headers: headers
  };
    return this.http.get(`${this.uri}/user/profile/orders`, httpOptions)
  }
}

User profile orders.ts:

export class ProfileOrdersComponent implements OnInit {

  myOrders: OrderDetails[];
  constructor(private userService : UserService) { }

  ngOnInit() {
    this.userService.getProfileOrders().subscribe((data:OrderDetails[]) =>{
      this.myOrders = data
      console.log(this.myOrders);
    })
}

HTML page:

<div class = "container">
<div *ngFor = "let order of myOrders">
   <h4>first name is: {{order.firstName}}</h4>

</div>
</div>

By doing:

 <div *ngFor = "let order of myOrders | keyvalue">

, the error disappears, but nothing is shown on the page:

Much Appreciated!

Answer 1

Your orders are actually set as the value of the Orders key.

Try using the Orders from your data

this.myOrders = data.Orders;

You could also modify your service to map the returned result instead

return this.http.get(`${this.uri}/user/profile/orders`, httpOptions)
.pipe(map(res => res.Orders));