Cannot display JSON API result from console to html page

Question

Cannot display the console result in the html page and this is the code of the TS component (home.component.ts)

 import { Component, OnInit } from '@angular/core'; import { Http, Response } from '@angular/http'; import {Router } from '@angular/router'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor( private http: Http, public router:Router ) {} ngOnInit() {} source=""; destination=""; date=""; names=""; searchCity(){ this.http.get("http://127.0.0.1:8000/restapi/?source="+this.source+"&destination="+this.destination+"&date="+this.date+"") .subscribe( (res:Response) => { this.router.navigate(['test']); const searchFlight= res.json(); console.log(searchFlight); //this.names = searchFlight.names; } ) } } 

This is the page where i want to display the result (test page) (this.router.navigate(['test']);) (test.component.html)

  <div class="hl1"></div> {{names}} {{prices}} <div class="hl1"></div> 

and thess are the params i get (home.component.html)

 <input type="text" placeholder="From ..." [(ngModel)]=source name="source"> <input type="text" placeholder="To ..." [(ngModel)]=destination name="destination"> <input type="text" class="input datepicker" value="Mm/Dd/Yy" [(ngModel)]=date name="date"> <button (click)=searchCity() type="submit">Search</button> 

and this is the console result enter image description here

Answer 1

Conosole.log is to show debug prints in Console no in HTML.

To see the service results in HTML you must to get them from response object example:

... first init you variables to see them on html

this.names = "Sample"
this.prices = 5;

... then apply this code inside your function

this.http.get("http://127.0.0.1:8000/restapi/?source="+this.source+"&destination="+this.destination+"&date="+this.date+"")
.subscribe(
 (res:Response) => {
   this.router.navigate(['test']);
   searchFlight= res.json();
   console.log(searchFlight);

   this.names = searchFlight.names;
   this.prices = searchFlight.prices;
 }
)

... Advice : check you api result, and check if you problem is just update the DOM

Answer 2

The way you are trying to see the data will only show you on the Console. You can use Firebug or Chrome Developer Tools ( Ctrl + Shift + I ) and you can see the object. If you need to print it on the screen you can do something like this:

...
export class HomeComponent implements OnInit {
constructor( private http: Http, public router:Router ) {}

ngOnInit(){}

get printObject() {return JSON.stringify(this.object)};  //set this method

and you can use this in your template like

<div> {{printObject}} </div>

What this does is sets a method on the controller that returns a stringified representation of the object. If you have an array, try something like this in your template

<ul>
 <li *ngFor="let object of array">{{object | json}}</li>
</ul>