Localhost request from angular

user_8476078 0
Viewed 8380

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

angular flask python
3 Answers

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);
}
user_47362440

Great question, and as some others have suggested it would seem that you're missing a .subscribe() on your getAnnounce() method. Angular Docs has a guide on observables that can help you get a better understanding.

I have a few more suggestions for improving your experience with angular. Take advantage of services for grouping together similar functionality. For example, in your provided code, you could move your getAnnounce() to a new service you create; something like AnnouncementService. Then you can use this in many places of your code. it also helps test it and find bugs later on since your code is more separated.

Another thing you can do is to move your server api address to the environment variables. By default if you built your angular project using the Angular CLI you'll find in our src folder an environments folder with two files by default environment.ts and environment.prod.ts. you can access this JSON object anywhere within your .ts files and when you build your code for product vs locally it can change values to what ever you set. In your case you would put your local API address in there http://127.0.0.1:5000.

export const environment = {
  production: false,
  api: 'http://127.0.0.1:5000'
};

Now you can access this easily and have one spot to change if you ever change your port number or have your api in a real server.

import { environment } from './environments/environment';

/* remember to import the non prod version of the environment file, angular knows how to switch them automatically when building for production or not. */

Hopefully this helps you with your coding, good luck!

user_3968420

You have to subscribe to your getAnnounce function.

For instance, you can try:

data = this.getAnnounce().subscribe();

Or directly on your constructor / ngOnInit:

ngOnInit() {
   this.getAnnounce().subscribe(
     data => this.data = data
   );
}
user_57992870
Related