fetch in JS is not receiving the appropriate JSON format from json_encode in php

Question

I have a function in JS that fetches data from a php page.

JS code:

fetch("print.php)
    .then(function (r) {
        return r.json()
    })
    .then(function (values) {
        ......
        ......
    })
}

PHP print.php code:

<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
    $num = $_GET['num'];
    $datas = array_chunk(array_map('rtrim', file('./myFile.txt')), 5);
    $result;
    foreach ($datas as $index => $data) {
        if ($data[0] == $num) {
            $result = $data;
        }
    }

    echo json_encode($result);
}

When I run my code, I am getting the error below:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Can anyone help me debug this. I have tried echo-ing json_encode([$result]); but it didn't work. I have been trying to fix it for the past 3 hours, but i am hopeless. I have no clue in which direction to go.

UPDATE:

Answer 1

First of all, you have extra closing braces at the end of PHP file if that is not just a typo while pasting in code here.

About the code, well as it is unclear what is in the file myFile.txt, let me show you an example of how it works. You can follow these steps on your local computer to replicate the example and see it working on your end.

let's say I have this simple PHP filename fetch.php

<?php 
if($_SERVER['REQUEST_METHOD'] == 'GET'){
    echo json_encode(['Message'=>'you successfully received the response.']);
}
?>

Create an HTML page sample.htmland add the following inside the body tag.

<ul>
    <li class="print"></li>
</ul>

Now add the following script in the bottom of HTML page before the </body> tag.

<script type="text/javascript">
  $(document).ready(function(){
    var resultContainer = document.querySelector('ul li.print');

    fetch('fetch.php')
    .then(function (response) {
        return response.json();
    })
    .then(function (response) {
        resultDiv.innerHTML = response.success;
    }).catch(function(err){
        resultDiv.innerHTML='There was an error reading the JSON response see here '+err;
    });
   });
</script>

Since we are fetching a PHP file which is returning json, we return response.json() on the response to give it the proper MIME type so it will be handled properly, then display it in the <li> element. Additionally, i am using the .fail to show the error message if the Promise is rejected

This is as simple as it gets and it should show you the text you successfully received the response. inside the li once the Promise resolves. If it does then it means you need to troubleshoot your PHP file first to see what is in the myFile.txt and what is printed in response when it reaches that last line echo json_encode($result);.

Also, your PHP file states that you are sending the query parameter num to the PHP file whereas your script does not contain any query string parameter with the name num.

secondly what is the $result; doing after the line $datas = array_chunk(array_map('rtrim', file('./myFile.txt')), 5);, most of your code makes no sense, you should work on your assignment and provide actual sensible code that others can understand and help you out.

Hope that helps you out