fetching xml from web service in Angular 4

Question

I am simply trying to retrieve xml data from some domain and read them onto my application. For now, I just want to read raw data. From my research, It comes to me that it is best to convert xml into json and load them onto the application. Here is what I tried to convert and print them. Could anyone advice on what I am doing wrong?

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

//make the http request 
return this.http.get(this.url, {headers: headers})
                .map(res => JSON.parse(parseString(res.text(),'')))
                //Print JSON data?
                .subscribe(data =>{console.log(data);});
}

private handleErorr( error: Response){
  console.log('something went wrong');
  return Observable.throw(error.json().error || 'server error');
}

What is the implementation of parseString method? Anyway, you are using JSON.parse(), which needs string argument with valid JSON, so parseString needs to return it. Also what error are you seeing? — Martin Adámek
– Martin Adámek, Commented Oct 11, 2017 at 17:13

Martin Adámek · Accepted Answer · 2017-10-11 18:49:26Z

1

There are 2 problems with your code:

parseString() method is not synchronous, so it will not return the parsed object, you need to use callback for this.
You are trying to convert the result of parseString() to JSON via JSON.parse(). That is just wrong, as the result should be already JS object. You do not need the JSON.parse() call at all.

Try it like this:

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

    //make the http request
    return this.http
        .get(this.url, {headers})
        .subscribe(res => {
            parseString(res.text(), (err, result) => {
                if (err) {
                    return console.log('invalid XML');
                }

                console.log(result);
            })
        }, err => this.handleError(err);
}

private handleErorr(error: Response) {
    console.log('something went wrong');
    return Observable.throw(error.json().error || 'server error');
}

edited Oct 11, 2017 at 18:49

answered Oct 11, 2017 at 18:23

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

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

10 Comments

James Over a year ago

I tried and it shows that it cannot find the name data?

Martin Adámek Over a year ago

Are you sure your API returns something? Did you check the response in chrome inspector or some rest client? Try adding console.log(res.text()); before the parseString call.

Martin Adámek Over a year ago

Oh sorry, my bad, the variable is result, not data. I will update the code.

James Over a year ago

Thank you. Now I see error saying " OPTIONS test/Service.asmx/SendReceiveString?location=abc 403 (Forbidden)" and "Failed to load OPTIONS test/Service.asmx/SendReceiveString?location=abc : Response for preflight has invalid HTTP status code 403".. basically it returns handleError

Martin Adámek Over a year ago

Well your API returns 403 Forbidden response, looks like its failing with OPTIONS request, sounds like there is a CORS problem (your API is served on different domain than your angular application), or maybe you are missing some token or cookie (depends on your API implementation of authentication/authorization). I can not help you with this as I am not familiar with ASP.NET, but it is a different problem that exceeds this question. You should create a new one with some more details of how your API is built.

|

Collectives™ on Stack Overflow

fetching xml from web service in Angular 4

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related