Angular6 Get method response "_isScalar":false,"source"

Question

I am trying to show the json data on the html page. The data on the server shows me json data but when i try to show it on page it gives me this data

{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":true,"value":{"url":"https://feeds.citibikenyc.com/stations/stations.json","body":null,"reportProgress":false,"withCredentials":false,"responseType":"json","method":"GET","headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"params":{"updates":null,"cloneFrom":null,"encoder":{},"map":null},"urlWithParams":"https://feeds.citibikenyc.com/stations/stations.json"},"scheduler":null},"operator":{"concurrent":1}},"operator":{}},"operator":{}}

my code for getting the data is

import { HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class GetdataService {
posts : any;
readonly ROOT_URL ="https://feeds.citibikenyc.com/stations/stations.json";
constructor(private http: HttpClient ) { }

getPosts()
{

this.posts = this.http.get(this.ROOT_URL );

return JSON.stringify(this.posts);
}


}

Answer 1

this.http.get() doesn't return data but rather an observable, that you have to subscribe to:

getPosts() {
  this.http.get(this.ROOT_URL)
    .subscribe((data) => {
        //DO STUFF HERE
    });
}

Readmore

Secondly, while it shouldn't be needed to decode JSON after you fix the observable-stuff, you decode json with JSON.parse() not JSON.stringify. stringify converts the object into string (the exact opposite of what you wanted).