This is the error i got
HttpErrorResponse {headers: _HttpHeaders, status: 200, statusText: 'OK', url: 'http://localhost:4200/dc-batman', ok: false, …}
error
:
{error: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON at JSON.parse (<anonymous>…, text: '<!doctype html>rn<html lang="en">rn<head>n <scrip…ain.js" type="module">x3C/script></body>rn</html>rn'}
headers
:
_HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure during parsing for http://localhost:4200/dc-batman"
name
:
"HttpErrorResponse"
ok
:
false
status
:
200
statusText
:
"OK"
url
:
"http://localhost:4200/dc-batman"
[[Prototype]]
:
HttpResponseBase
I have my service where I make my .get
@Injectable()
export class HeroesService{
urlHeroes: string = "http://localhost:3000/heroes";
getInfoId(id:string): Observable<SearchHeroesResponse>{
return this.http.get<SearchHeroesResponse>(id)
}
constructor(private http:HttpClient){}
}
and in my component where I subscribe the response
@Component({
selector: 'app-heroe',
templateUrl: './heroe.component.html',
})
export class HeroeComponent {
ngOnInit(){
this.activatedRoute.params.pipe(switchMap(({id})=>this.http.getInfoId(id)))
.subscribe(info => console.log(info));
}
constructor(private http: HeroesService, private activatedRoute:ActivatedRoute){}
}
I’m using a JSON Server, where I have a localhost with this info (clipped information)
{
"usuarios": [
{
"id": 1,
"usuario": "John Doe",
"email": "[email protected]"
}
],
"heroes": [
{
"id": "dc-batman",
"superhero": "Batman",
"publisher": "DC Comics",
"alter_ego": "Bruce Wayne",
"first_appearance": "Detective Comics #27",
"characters": "Bruce Wayne"
},
{
"id": "dc-flash",
"superhero": "Flash",
"publisher": "DC Comics",
"alter_ego": "Jay Garrick",
"first_appearance": "Flash Comics #1",
"characters": "Jay Garrick, Barry Allen, Wally West, Bart Allen"
}
]
}
I don’t know what to do, I have searched on internet and they say something about HTML and JSON compatibility, but I’m new at Angular and I’m following a course of it, so please be understandable.
If you want more information about what I wanna do, I click a button from each heroe that sends the id to the url with a routerLink:
<button mat-button color="warn" [routerLink]="['/heroes', heroe.id]">Read more</button>
I do get the id in url, indeed it shows the heroe name in console when executing this code:
ngOnInit(){
this.activatedRoute.params.subscribe( ({id}) => console.log(id));
}
