SyntaxError: Unexpected token in JSON at position 576 at JSON.parse

Good morning everybody!
I’m new to the web development area and I’m having a hard time trying to display mysql data on the ionic html page…I’m getting the following error:

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost/phpp/entra.php/", ok: false, …}
error: {error: SyntaxError: Unexpected token in JSON at position 576 at JSON.parse (<anonymous>) at XMLH…, text: "[{\"codigo\": \"25\",\"tituloEvento\": \"Aviso\",\"conteudo…\"07:46:56\",\"dataCriacao\": \"2021-07-09 19:47:09\"}]"}
headers: HttpHeaders
lazyInit: () => {…}
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure during parsing for http://localhost/phpp/entra.php/"
name: "HttpErrorResponse"

Any help is welcome to me.

?php
header(“Access-Control-Allow-Origin:*”);
header(“Content-Type: text/html; charset=utf-8”);
$host = “mysql:host=localhost;dbname=eventosonline”;
$usuario = “root”;
$senha = “”;
try {
$conexao = new PDO($host, $usuario, $senha);

$sql = $conexao->prepare('SELECT * FROM `eventos`');

    $sql->execute();

    $dados = "[";

    while($lista = $sql->fetch()){
        if ($dados != "[") {
            $dados .= ",";
        }
        $dados .= '{"codigo": "'.$lista["id-evento"].'",';
        $dados .= '"tituloEvento": "'.$lista["titulo"].'",';
        $dados .= '"conteudoEvento": "'.$lista["conteudo"].'",';
        $dados .= '"diaEvento": "'.$lista["dia"].'",';
        $dados .= '"termina": "'.$lista["termoDoEvento"].'",';
        $dados .= '"dataCriacao": "'.$lista["criadoEm"].'"}';
    }
    $dados .= "]";
    echo $dados;

} catch (Exception $ex) {
echo "erro ao listar: ". $ex->getMessage();
};

*HTML*

Eventos Criados 

{{evento.tituloEvento}}

Dia {{evento.diaEvento}}

Fim {{evento.termina}}

{{evento.conteudoEvento}}

```

page.ts

import { AccessProviders } from '../providers/access-providers';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-evento-criado',
  templateUrl: './evento-criado.page.html',
  styleUrls: ['./evento-criado.page.scss'],
})
export class EventoCriadoPage implements OnInit {
eventos: any;
  constructor(public servidor: AccessProviders) {
    this.buscar();
  }
ngOnInit() {
  }
buscar(){
this.servidor.getPegar().subscribe(data => this.eventos = data,
  err => console.log(err));
  }
}

And this is the provider:

import {
  Injectable
} from '@angular/core';
import {
  HttpClient,
  HttpHeaders
} from '@angular/common/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import {
  AlertController
} from '@ionic/angular';
import {
  map
} from 'rxjs/operators';

@Injectable()
export class AccessProviders {
  server: string = 'http://localhost/phpp/select.php/';
  server1: string = 'http://localhost/phpp/entra.php/';
  constructor(
      public http: HttpClient,
      public allertCrtl: AlertController,
  ) {}

  postDate(body, file) {

      let headers = new HttpHeaders({
          'Content-Type': 'application/json; charset=UTF-8'
      });
      let options = {
          headers: headers
      }
      return this.http.post(this.server + file, JSON.stringify(body),
          options).timeout(59000).map(res => res);

2 posts - 2 participants

Read full topic