Localhost request from angular

Question

Hello i have created a mini endpoint in Flask in python, and it's working well. When i access it from Postman :

http://127.0.0.1:5000/retrieve_data

it retrieves the data as a json. But when i call the endpoint from angular:

export class HomeComponent implements OnInit {
  title = 'angular-demo';
  data = this.getAnnounce();

  getAnnounce() {
    return this.http.get('http://127.0.0.1:5000/retrieve_data');
  }

  constructor(private http: HttpClient) {

  }

The actual result is:

    {
        "_isScalar": false,
        "source": {
            "_isScalar": false,
            "source": {
                "_isScalar": false,
                "source": {
                    "_isScalar": true,
                    "value": {
                        "url": "http://127.0.0.1:5000/retrieve_data",
                        "body": null,
                        "reportProgress": false,
                        "withCredentials": false,
                        "responseType": "json",
                        "method": "GET",
                        "headers": {
                            "normalizedNames": {},
                            "lazyUp
Canceldate": null,
                            "headers": {}
                        },
                        "params": {
                            "updates": null,
                            "cloneFrom": null,
                            "encoder": {},
                            "map": null
                        },
                        "urlWithParams": "http://127.0.0.1:5000/retrieve_data"
                    }
                },
                "operator": {
                    "concurrent": 1
                }
            },
            "operator": {}
        },
        "operator": {}
    }

PS: i am very noob at anuglar

Answer 1

From the document of angular's http client, the return value's type of http.get() is Observable

So if you want to get the data that you server respond, you must subscribe as this:

data = {};

getAnnounce() {
    this.http.get('http://127.0.0.1:5000/retrieve_data')
        .subscribe(result => this.data = result);
}