How to get a string data from a PHP file which uses json_encode() while using fetch() in TypeScript? [closed]

1 week ago 6
ARTICLE AD BOX

I'm trying to get a simple string data from my PHP file outputting a simple version number I scrape from my github repo to populate a minor place in my website but so far, I'm unable to get the desired data, resulting in error saying: "JSON.parse: unexpected character at line 1 column 1 of the JSON data".

WebScraper.php:

<?php header(header: "Content-Type: application/json; charset=utf-8"); error_reporting(error_level: 0); require_once dirname(path: __FILE__) . "../../../vendor/autoload.php"; use GuzzleHttp\Client; use GuzzleHttp\Exception\RequestException; class WebScraper { private string $targetUrl; private Client $client; public function __construct(string $url) { $this->targetUrl = $url; $this->client = new Client(config: [ "headers" => [ "User-Agent" => "Mozilla/5.0", "Accept" => "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8", ], "allow_redirects" => true, "http_errors" => false, ]); } public function fetchContent(): string { try { $response = $this->client->get(uri: $this->targetUrl); $status = $response->getStatusCode(); if ($status < 200 || $status >= 300) { return "HTTP error: {$status}"; } return (string) $response->getBody(); } catch (RequestException $e) { return "HTTP client error: " . $e->getMessage(); } } public function getDataByClass(array $classNames): array { $content = $this->fetchContent(); # init error checking if ( str_starts_with(haystack: $content, needle: "HTTP error:") || str_starts_with(haystack: $content, needle: "HTTP client error:") ) { return []; } ; $hasAnyClass = false; foreach ($classNames as $c) { if (str_contains(haystack: $content, needle: $c)) { $hasAnyClass = true; break; } } if (!$hasAnyClass) { return []; } $dom = new DOMDocument(); @$dom->loadHTML(source: $content); $xpathObj = new DOMXPath(document: $dom); $data = []; foreach ($classNames as $className) { # Get the elements via their class names $xpath = "//*[contains(concat(' ', normalize-space(@class), ' '), ' {$className} ')]"; $elements = $xpathObj->query(expression: $xpath); if ($elements === false) { continue; } foreach ($elements as $element) { $text = trim(string: $element->textContent); # double check to ensure the output is a version number if ($text !== "" && version_compare(version1: $text, version2: "0.0.1", operator: ">=")) { $data[] = $text; } } } return $data; } } # My portfolio URL $url = "https://github.com/gokacinlar/portfolio"; $scraper = new WebScraper(url: $url); $classData = $scraper->getDataByClass(classNames: ["css-truncate"]); # print_r(value: $classData[0]); echo json_encode(value: $classData[0] ?? ''); # get the first index of the result (a string) exit;

webScraper.ts (client-side code):

class WebScraper { private static _phpFile: string; constructor(url: string) { WebScraper._phpFile = url; } private static async fetchPhpFile(targetUrl: string): Promise<string> { const response = await fetch(targetUrl); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } else { const jsonData: string = await response.json(); return jsonData.toString(); } } public static async scrape(): Promise<string> { if (!WebScraper._phpFile) { throw new Error("No URL set. Call constructor first."); } return this.fetchPhpFile(WebScraper._phpFile); } } export default WebScraper; const scraper = new WebScraper("../php/WebScraper.php"); const result = WebScraper.scrape(); console.log(result);

When I run the PHP file, it outputs a version number of "1.2.1" and I confirm it with gettype() function in PHP. It says "string". What am I doing wrong?

Read Entire Article