My Angular 6 application needed to call a web service that returns HTML data, which I then had to display within a div.
Below is an example of the HTML response data from the service:
<html>
<head>
<title>Chart : 180: Abraham, Male, 1 Year(S)</title>
</head>
<frameset border=0 rows="145,*">
<frame noresize id="t_pan" name="t_pan" src="id=180" scrolling="no">
<frameset border=0 cols="175,*">
<frame noresize id="l_pan" name="l_pan" src="id=180">
<frame noresize id="r_pan" name="r_pan" src="Pt&id=1937181">
</frameset>
</frameset>
</html>
This is how I called the API that returned the above HTML data:
getDetailData(url:string): Observable<any> {
return this.http.get(url, {headers :{'Accept': 'text/html', 'responseType': 'text' as 'json'}})
.map(data => {
data;
});
In my component, I invoked the service like this:
const url = "http://10.98.12.1:2009/PChart?id=180";
this.personService.getDetailData(url).subscribe(res =>{
console.log(res);
});
The issue:
"error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHtt…, text: "..."
Response :
https://i.sstatic.net/43rLk.png
My Solution :
I realized my mistake was using the wrong path. I solved it by using an iframe to load and display the data correctly.