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

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/app/services/myservice.service.ts

CodePudding user response：

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.