CODEWITHSUNDEEP
javascriptangularhttphttpclientangular-activatedroute
Alex Whitney
Alex Whitney

Reputation: 3

I got this error in my .get request using Angular

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>\r\n<html lang="en">\r\n<head>\n  <scrip…ain.js" type="module">\x3C/script></body>\r\n</html>\r\n'}
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));
  }

Upvotes: 0

Views: 79

Answers (0)

Related Questions