Angular HttpClient XML response

Question

const headers = new HttpHeaders({ 'Content-Type': 'text/xml' });
headers.append('Accept', 'text/xml');
headers.append('Content-Type', 'text/xml');
this.http.get('getxmlurl', {headers: headers}).subscribe(response => {
  return '1234';
});

Hi I am using Angular HttpClient to make a http get request from a spring controller which returns a XML response.

The problem I have is the response is ALWAYS NULL even though I can see the xml response from the chrome developer network tab.

I thought it might be something to do with the request header, Angular defaults to JSON however I am unable to change the request header with the code above. Can someone please advice.

Thanks

I have figured this out. need to set the responseType to text. Cheers this.http.get(sldUrl, {observe: 'response', responseType: 'text', headers: headers}) — user2106630
– user2106630, Commented Jul 25, 2017 at 1:25

Martin Schneider · Accepted Answer · 2024-12-13 13:53:31Z

42

Set the responseType to text:

this.http.get('getXmlUrl', { responseType: 'text' }).subscribe(response => {
  console.log(response);
});

Allowed values for responseType:

arraybuffer
blob
json (default)
text

The responseType value determines how a successful response body will be parsed.

See Angular Docs:
HttpRequest # responseType
HttpClient # request()

edited Dec 13, 2024 at 13:53

answered Aug 21, 2017 at 14:38

Martin Schneider

15.7k8 gold badges63 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sql Surfer Over a year ago

for Observable<string> it may also be a requirement to set observe: 'body' ... this.myHttpCliVar.get('pathToMyTargetUrl' , { observe: 'body', responseType: 'text'} ).subscribe(valAsStr => {this.localStrVar = valAsStr; }); notice that it is .get(...) not get<string>(...)

ontananza Over a year ago

On angular 8 don't forget cast as object <Object>{ responseType: 'text' }

Martin Schneider Over a year ago

"If responseType is the default json, you can pass a type interface for the resulting object as a type parameter to the call.". See also Overload #3 of the get() method in docs: The return value of responseType: 'text' is Observable<string>.

Sql Surfer · Accepted Answer · 2019-07-17 22:48:37Z

9

2019 Angular 7 above HttpClient Note with Code

Get Angular Response as Text or Xml NOT as Json

Some subtle changes may have occurred in Angular 7 after the other previous answers were written. This is like a detailed comment with code to MA-Maddin's answer.

@Injectable()
export class MyWidgetService 

   private myHttpClient: HttpClient;

   constructor(httpClient: HttpClient) {
      super(httpClient); // you MIGHT need this 

      this.myHttpClient = httpClient; 
      }


   getResAsObservableStr = () => { 

      // Override the JSON Default Behavior.
      // 3 special things for text from HttpClient 
      //    a: Calling the raw .get('url')  NOT get<string>('url') 
      //    b: override observe: 'body' 
      //    c: override responseType: 'text' 

      return this.myHttpClient.get('pathUrlForCall' 
                 , { observe: 'body', responseType: 'text'} );
   }


// In Calling Coponent 
export class MyWidgetComponent 
   valAsStr: string;  

  constructor(
    // more vars like Router...
    private myWidgetSvcRef: MyWidgetService) { }

  ngOnInit() {

    this.getMyStrValFromWeb();

  } // ngOnInit end

  getMyStrValFromWeb = () => {

    this.myWidgetSvcRef.getResAsObservableStr()
    .subscribe(valAsStr => {this.valAsStr = valAsStr; });  

  } // end getMyStrValFromWeb


// in your html template (one possible scenario)

    <someControl [(ngModel)]="valAsStr" > </someControl>

answered Jul 17, 2019 at 22:48

Sql Surfer

1,4121 gold badge12 silver badges28 bronze badges

1 Comment

Arun s Over a year ago

Thanks for the answer. Passing { observe: 'body', responseType: 'text'} as options served the purpose. Its working for me

Heretic Monkey · Accepted Answer · 2018-10-18 19:28:56Z

1

The issue here is the HttpHeaders are immutable in angular. So instead of setting the values, you should set when you create the object. Something like

const headers = new HttpHeaders({ 'Content-Type': 'text/xml' }).set('Accept', 'text/xml');

But you are setting only request headers. If you want your response to be text/xml.

this.http.get('getxmlurl', { headers: headers, responseType: text/xml }).subscribe(response => { return response; });

You can remove headers unless you want to set request headers.

edited Oct 18, 2018 at 19:28

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

answered Jul 25, 2017 at 23:43

Karthikeyan Mohan

3492 gold badges4 silver badges11 bronze badges

1 Comment

Ka Mok Over a year ago

responseType: text NOT text/xml

Collectives™ on Stack Overflow

Angular HttpClient XML response

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related