Angular 5 Http api request gets response in chrome dev tools but won't return

Question

I have a "Response" content :

But I can't console.log it.

Update (15:00 22/03/2018, this is new version) :

in actions.component.ts :

 generatePOR(){
    this._api.exportToERP(this.selection).subscribe((res) => {
      console.log('heelo I am second phase');
      console.log(res);
    }, (error) => console.log(error), () => {});
  }

in api.ts :

generatePOR (idList): any {
  const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
  return this._http.post(apiURL, idList, { headers: new HttpHeaders().set('Content-Type', 'application/json') });
}

here is is the console log :

ro {headers: Ge, status: 200, statusText: "OK", url: "http://localhost:8080/purchaseorders/generatePOR", ok: false, …}error: {error: SyntaxError: Unexpected token P in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttp…, text: "PARTNER_RELATION_CUSTOMER_GROUPCODE;PARTNER_RELATI…95;2;NEW ORDER PUBLISHED;;;2017-10-289 08:00:00
↵"}headers: Ge {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure during parsing for http://localhost:8080/purchaseorders/generatePOR"name: "HttpErrorResponse"ok: falsestatus: 200statusText: "OK"url: "http://localhost:8080/purchaseorders/generatePOR"__proto__: eo

Update (16:31) :

generatePOR (idList): any {
    const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
    this.PORresult = this._http.post(apiURL, idList, {
      observe: 'response',
      headers: new HttpHeaders({'Content-Type': 'application/json'}),
      responseType: 'text' as 'text'
    })
      .map((res, i) => {
        console.log('hi');
        console.log(res);
      });
    return this.PORresult;
  }

output :

hi  
ao {headers: Ge, status: 200, statusText: "OK", url: "http://localhost:8080/purchaseorders/generatePOR", ok: true, …}body: "PARTNER_RELATION_CUSTOMER_GROUPCODE;PARTNER_RELATION_CUSTOMER_PLANTCODE;PO_UpdateVersion;PARTNER_RELATION_SUPPLIER_NOLOCAL;PO_PoNumber;PO_PosNumber;PO_RequestNumber;PARTNER_RELATION_SUPPLIER_NO;PO_CollabPrice;PO_CollabPromQty;PO_Status;PO_SupAckNumber;PO_CollabComment;PO_CollabPromDate
↵PARTNER_RELATION_CUSTOMER_GROUPCODE;PARTNER_RELATION_CUSTOMER_PLANTCODE;1;PARTNER_RELATION_SUPPLIER_NOLOCAL;4500634818;00070;0001;PARTNER_RELATION_SUPPLIER_NO;464.95;2;NEW ORDER PUBLISHED;;;2017-10-289 08:00:00
↵"headers: Ge {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}ok: truestatus: 200statusText: "OK"type: 4url: "http://localhost:8080/purchaseorders/generatePOR"__proto__: eo

heelo I am second phase  undefined

i'd much rather have the success, if i shut down the server the error log runs fine. I want the response contents. — tatsu, Mar 22 '18 at 10:28
Sure, could you log the response before your if and post its content in an [edit] of your post ? Not as an image, but as text, please — , Mar 22 '18 at 10:30
You should subscribe to observables `this._http.post(apiURL, idList, { observe: 'response' }, ).subscribe((res) => console.log(res));` — mxr7350, Mar 22 '18 at 10:45
@mxr7350 the error I get lead me to this : https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0-in-react-app apparently I'm console.logging something that first needs to be parsed. End result I actually want to download the result as an Excel .csv file so maybe the logging step just to see that I have the result is extra work. but I can't use what they suggest both `xhr` and `jqxhr` are unrecognized by my IDE. — tatsu, Mar 22 '18 at 12:33
is the issue that getting response from POST is simply impossible? — tatsu, Mar 22 '18 at 13:49

score 1 · Answer 1 · answered Mar 22 '18 at 10:32

use .body to get the body of your response

if (res) {
      if (res.status === 201) {
        return [{ status: res.status, json: res.body }]
      }
      else if (res.status === 200) {
        console.log('hello, I am a result ',res);
        return [{ status: res.status, json: res.body }]
      }
    }

score 1 · Answer 2 · answered Mar 22 '18 at 10:33

The way you are returning promise is wrong here.

generatePOR (idList): Observable<any> {
const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
return this._http.post(apiURL, idList, { observe: 'response' }, )
  .map((res: HttpResponse<any>, i) => {
    if (res) {
      if (res.status === 201) {
        return [{ status: res.status, json: res }]
      }
      else if (res.status === 200) {
        console.log('hello, I am a result ',res);
        return [{ status: res.status, json: res }]
      }
    }
  })
  .catch((error: any) => {
    if (error.status < 400 ||  error.status ===500) {
      return Observable.throw(new Error(error.status));
    }
  })
  .pipe(
    catchError(this.handleError)
  );

}

don't return this.results, return the the promise directly . Because api may take time. But before that you are returning the results object. That is the reason you are not getting that data.

I'm willing to use either so long as it works but I prefer observables. — tatsu, Mar 22 '18 at 13:56

score 1 · Accepted Answer · answered Mar 23 '18 at 09:53

After a day and a half of toiling here's what worked for me :

actions.component.ts :

generatePOR(){
  this._api.generatePOR(this.selection).subscribe(res => {
    if(res !== null && res !== undefined){
      console.log(res.body);
    }
  }, (error) => console.log(error), () => {});
}

api.ts :

generatePOR(idList): any {
  const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
  this.PORresult = this._http.post(apiURL, idList, {
    observe: 'response',
    headers: new HttpHeaders({'Content-Type': 'application/json'}),
    responseType: 'text' as 'text'
  }).catch(this.handleError);
  return this.PORresult;
}

...and making sure the backends send an actual file in the text/csv format and not just brute html.

this github thread helped alot in the creation of correct header and options : https://github.com/angular/angular/issues/18586

note: you must make both inline to the api call you cannot declare them as variables beforehand in the function or elsewhere in the class or application. also the nonsensical parsing : responseType: 'text' as 'text' is a big key factor in making it work.

Angular 5 Http api request gets response in chrome dev tools but won't return

3 Answers3