{Angular} Error trying to connect to server (Http failure during parsing for)

Question

I'm trying to make a dynamic web page. I have the data in a local json and I want to connect to a mock server using json-server.

If I use a local address (like "src/assets/data/data.json") there are no errors and I can access without complications. The problem comes when I want to do the same using the address "http://localhost:5000".

ERROR Object { headers: {…}, status: 200, statusText: "OK", url: "http://localhost:5000/", ok: false, name: "HttpErrorResponse", message: "Http failure during parsing for http://localhost:5000/", error: {…} }

I searched for information but didn't find (or didn't understand) how to fix it. I don't know if it will help (and I found it on the Internet) but if I add "|json" to the interpolation code I get "null" as a result. Well, I leave my code. Any help is appreciated.

An example json:

{
  "block":{
    "block1":"block1",
    "block2":"block2",
    "block3":"block3"
  }
}

My service:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {
  private apiUrl = 'http://localhost:5000/'
  constructor(private http:HttpClient) { }

  getData():Observable<any>{
    return this.http.get(this.apiUrl)
  }
}

My component template "connection":

<h1 style="text-align: center;">{{myTest?.block.block1}}</h1>
<h1 style="text-align: center;">{{myTest?.block.block2}}</h1>
<h1 style="text-align: center;">{{myTest?.block.block3}}</h1>

My component ts:

import { MyserviceService } from './../../services/myservice.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-connection',
  templateUrl: './connection.component.html',
  styleUrls: ['./connection.component.css']
})
export class ConnectionComponent implements OnInit {
  myTest:any;
  constructor(private dataTest:MyserviceService) { }

  ngOnInit(): void {
    this.dataTest.getData().subscribe(data => {
      this.myTest = data;
    });
  }
}

I have also recreated it in Stackblitz.

https://stackblitz.com/edit/angular-tc-fd?file=src%2Fapp%2Fservices%2Fmyservice.service.ts

possible duplicate of stackoverflow.com/questions/46408537/… or stackoverflow.com/questions/56864107/… — CCBet
– CCBet, Commented May 24, 2022 at 19:55
What do you serve with json-server? Can you show what you get when you run the json-server and browse to localhost:5000 ? — Charlie V
– Charlie V, Commented May 24, 2022 at 20:15
Regarding the duplicate thing, I have read them but I have not understood them nor am I sure if they really tell the way to solve my problem. Regarding the second... Well, this is a bit embarrassing, I just solved it thanks to your question. Indeed, the first thing it displayed was the welcome page, and further down, I had the resources leading to the json. Simply by changing the service address to "localhost:5000/block" and making a small change in the template, it showed it. Thank you, and... I'll have to think a little better before asking again. — Flair Dreamer
– Flair Dreamer, Commented May 25, 2022 at 14:39

Flair Dreamer · Accepted Answer · 2022-05-25 14:59:40Z

This is a bit embarrassing, and I don't know if it's "correct", but I'll answer myself since I was able to solve it thanks to a simple question I was asked.

json-server has a welcome page, which in my case would be at the address "localhost:5000". The problem was that my program wanted to get information from the welcome page which is not json. But if I add the resource, which is in "localhost:5000/block", it does show it and my code would look like this.

export class MyserviceService {
  private apiUrl = 'http://localhost:5000/block'
  constructor(private http:HttpClient) { }

  getData():Observable<any>{
    return this.http.get(this.apiUrl)
  }
}

Plus a small change in the template.

<h1 style="text-align: center;">{{myTest?.block1}}</h1>
<h1 style="text-align: center;">{{myTest?.block2}}</h1>
<h1 style="text-align: center;">{{myTest?.block3}}</h1>

And that's it.

Although it was not what I expected, at least I solved it and learned.

Collectives™ on Stack Overflow

{Angular} Error trying to connect to server (Http failure during parsing for)

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related