CODEWITHSUNDEEP
angulartypescripthttpclient
Souad
Souad

Reputation: 5094

Get response of POST request in angular 6

I'm using angular to make a user interface that communicates with an API REST. In the bellow function, I first add a project by a post request, then add a list of aliases entred by the user in the form, then add the alias to the project, then I get the list of the selected apps and I look for their ID then add them to the project. Below the post calls: 

addProject(name: string, description: string): void {

    // Ajouter un nouveau projet
    let newProjectId: number;
    let newAliasId: number;
    let url = this.baseUrl + "/projects";
    this.httpClient.post<Project>(url,
        {'name': name, 'description': description }, 
        httpOptions).subscribe((data: any) => { newProjectId = data['result']['id'];})

    // Ajouter les alias 
    for (let entry of this.aliasList) {
        let UrlAddAlias = this.baseUrl + "/alias";
        this.httpClient.post(UrlAddAlias, {'alias': entry }, httpOptions)
        .subscribe((data: any) => { newAliasId = data['result']['id'];});
        // Ajouter les alias au nouveau projet
        let UrlAliasToProject = this.baseUrl + `/projects/${newProjectId}/alias`;
        this.httpClient.post(UrlAliasToProject, {"alias_id" : newAliasId}, httpOptions)
        .subscribe((data: any) => { console.log("alias added to project");});
    };

    // Ajouter les applications selectionnées au nouveau projet
    for (let entry of this.selectedApps) {
        let Urlapp = this.baseUrl + `/apps/name/${entry}`;
        let appId;
        this.httpClient.get(Urlapp).subscribe(data => { appId = data['result']['id']; });
        let urlappToProject = this.baseUrl + `/projects/${newProjectId}/apps`;
        this.httpClient.post(urlappToProject, {'app_id': appId });
    };
}

The problem is that I don't get to retreive newProjectId value and newAliasId value. I get this error:

Object { headers: {…}, status: 405, statusText: "Method Not Allowed", url: "http://api.com/v1/projects/undefined/alias", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://api.com/v1/projects/undefined/alias: 405 Method Not Allowed", error: "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 3.2 Final//EN\">\n<title>405 Method Not Allowed</title>\n<h1>Method Not Allowed</h1>\n<p>The method is not allowed for the requested URL.</p>\n" }

I can get the values by console.log but they are undefined elsewhere.

Upvotes: 1

Views: 3366

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191829

The .subscribe callback happens asynchronously. This means that the code that is written after it will still execute before it... similar to setTimeout

setTimeout(() => console.log('second'));
console.log('first');

Essentially you can put everything after the .subscribe inside of the .subscribe:

.subscribe((data: any) => {
  newProjectId = data['result']['id'];

  for (let entry of this.aliasList) { ...
});

You may also want to rework your API, if possible, to not have to make multiple requests and have the post handle everything itself.

Upvotes: 1

Related Questions