How to display Http Response response in HTML using Angular

Question

I want to display my object values in HTML tags but nothing comes up. The object appears successfully in the console. When I simply place res only [object object] displays on the page and res.json and res.text display nothing. Please see code below.

Shopping-Cart-Child.component.html

<form #form="ngForm" autocomplete="off">
    <div class="form-group">
        <div class="input-group">
         <div class="input-groupprepend">
           <div class="input-group-text bg-white">
            <i class="fas fa-user-tie"></i>
           </div>
         </div>
         <input placeholder="Person Number" type="text" [(ngModel)]=personNo name="personNo">  
        </div>        
    </div>
    <br>
    <div class="form-group">
        <button class="btn btn-success btn-lg btn-block" (click)=SearchCustomer()>Get shopping cart</button>
    </div> 
    <div class="form-group">
    <div class="row">
        <div class="col-md-7">
            <p>{{results}}</p>
       </div> 
    </div>  
    </div> 
</form>

Shopping-cart-child.Component.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient,HttpResponse} from '@angular/common/http';

@Component({
  selector: 'app-shopping-cart-child',
  templateUrl: './shopping-cart-child.component.html',
  styles: [
  ]
})
export class ShoppingCartChildComponent implements OnInit {
  personNo=''
  results:any;

  constructor(private http:HttpClient) { }
  SearchCustomer(){
    return this.http.get("http://lab.tekchoice.co.za/api/v1/CCWeb/GetShoppingCart?accountNo="+this.personNo)
    .subscribe((res:Response)=>{
      console.log(res);
      this.results = res.json;
    }
    )
   }
  ngOnInit(): void {
  }

}

Answer 1

Use the json pipe.

E.g.

<p>{{results | json}}</p>