Seeking assistance with a perplexing issue I've encountered after extensive investigation. Despite my efforts, the problem remains elusive.
I am working on an Angular 10 project with a PHP backend API:
...
$result = array(
'status' => 'success',
'code' => 200,
'data' => $products
);
echo json_encode($result);
});
The JSON response is as follows:
{
"status":"success",
"code":200,
"data":
[
{
"id":"1",
"name":"Traditional Gazpacho",
"brand":"Hacendado",
"yuccaScore":"90\/100",
"cocoScore":"9\/10",
"myRealScore":"Good processing",
"veganRating":"9",
"image":"gazpacho-hacendado.jpg",
"supermarket":"Mercadona",
"comment":"Healthier in other brands"
}
]
}
Validation tests confirm the JSON's correctness.
This is the code within the Angular service.ts file:
getVeganProducts(){
return this._http.get(this.urlvaganos+'vegan-products').pipe(map((response: any) => response.json()));
}
And here is the code from the Angular component.ts file:
getVeganProducts(){
this._veganProductService.getVeganProducts().subscribe(
result => {
if (result.code != 200){
console.log(result);
}else{
this.veganProducts = result.data;
}
},
error => {
console.log(<any>error);
}
);
}
This setup functions flawlessly in local development mode. However, upon deployment to the public_html directory on the hosting server, an error arises within the component.ts function:
list.component.ts > getVeganProducts() > error: SyntaxError: Unexpected token { in JSON at position 65
at JSON.parse (<anonymous>)
at gd.json (main.99255eee2d008be2c609.js:1)
at O.project (main.99255eee2d008be2c609.js:1)
at O._next (main.99255eee2d008be2c609.js:1)
at O.next (main.99255eee2d008be2c609.js:1)
at XMLHttpRequest.s (main.99255eee2d008be2c609.js:1)
at l.invokeTask (polyfills.35a5ca1855eb057f016a.js:1)
at Object.onInvokeTask (main.99255eee2d008be2c609.js:1)
at l.invokeTask (polyfills.35a5ca1855eb057f016a.js:1)
at a.runTask (polyfills.35a5ca1855eb057f016a.js:1)
The directory structure in public_html mirrors that of the local environment.
I have experimented with JSON.stringify() and JSON.parse(), yet the solution evades me. Removing .json() from the service.ts method yielded undefined results for result.data when debugging in Chrome in production.
The disparity between local TypeScript and compiled JavaScript in production appears to be the root cause, but resolving it eludes me.
Any guidance or insights would be greatly appreciated.
Thank you.