JSON parse error - Javascript from PHP json_encode

Question

I tried to solve this for eight hours, no luck, so I'm begging for help. I'm a hobbyist programmer.
Short overview: php-file reads values, creates two-dimensional array that is exported via "echo" and "json_encode". Then read by html/javascript/jquery. Then these array values should auto-populate the corresponding fields every second.

The error in Chrome Browser Console I'm getting: "Uncaught SyntaxError: Unexpected token d in JSON at position 0"

VM353:1 Uncaught SyntaxError: Unexpected token d in JSON at position 0
    at JSON.parse (<anonymous>)
    at HTMLDocument.<anonymous> ((index):16)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

The following php script reads GPIO values of a Raspberry Pi into a two-dimensional array:

<?php
header('Content-Type: application/json');
$bcm05 = exec ("gpio -g read 05"); # private comment
$bcm06 = exec ("gpio -g read 06"); # private comment
$bcm16 = exec ("gpio -g read 16"); # private comment
$bcm17 = exec ("gpio -g read 17"); # private comment
$bcm22 = exec ("gpio -g read 22"); # private comment
$bcm23 = exec ("gpio -g read 23"); # private comment
$bcm24 = exec ("gpio -g read 24"); # private comment
$bcm25 = exec ("gpio -g read 25"); # private comment
$bcm26 = exec ("gpio -g read 26"); # private comment
$bcm27 = exec ("gpio -g read 27"); # private comment
$data = array('jq_bcm05' => $bcm05, 'jq_bcm06' => $bcm06, 'jq_bcm16' => $bcm16, 'jq_bcm17' => $bcm17, 'jq_bcm22' => $bcm22, 'jq_bcm23' => $bcm23, 'jq_bcm24' => $bcm24, 'jq_bcm25' => $bcm25, 'jq_bcm26' => $bcm26, 'jq_bcm27' => $bcm27);

$json = json_encode($data, true);
echo $json;
?>

The echo output of this script is:

{"jq_bcm05":"1","jq_bcm06":"0","jq_bcm16":"0","jq_bcm17":"0","jq_bcm22":"0","jq_bcm23":"0","jq_bcm24":"0","jq_bcm25":"0","jq_bcm26":"0","jq_bcm27":"0"}

(Note that for some reason the header is not parsed, I've tried various header changes with utf-8, at other places of the code, ... - no luck that it is parsed in the file)

With the following html/javascript I'm trying to import the array so that a webpage only refreshes the array vales and not the whole webpage via jquery:

<!DOCTYPE HTML>
<html>
<head>
   <title>some title</title>
   <link href="style.css" rel="stylesheet" type="text/css">
   <script src="javascript.js" type="text/javascript"></script>
   <script src="jquery.min.js"type="text/javascript"></script>

      <script>
      var php_json_array = "jquery_gpio.php";

      $(document).ready(function(){
         var arr = JSON.parse(php_json_array);
         console.log(arr.jq_bcm05);
      }); 
   </script>

Also another question: I do have "div id" fields in the html page that correspond exactly to the first value of the two-dimensional array. So e.g. there is a field that I would like to populate with the value "1" from the two-dimensional array. I'm too stupid to think a "for each" javascript that does this for each pair that comes from the php script. So in the end it should be like

<div id="jq_bcm05">1</>
<div id="jq_bcm06">0</>
<div id="jq_bcm17">0</>
<div id="jq_bcm22">0</>

... and so on ...

I spent a full day and I'm not getting anywhere. Your help would be deeply appreciated.
Kind regards.

Open devtools and look at the network tab after you make the request. Inspect the response text and ensure that the JSON is the **only** thing being returned in the request — Rory McCrossan, Oct 23 '20 at 17:43
`var php_json_array = "jquery_gpio.php"; var arr = JSON.parse(php_json_array);` -- At no point do you request anything from the server. You're just trying to parse the string `jquery_gpio.php` — aynber, Oct 23 '20 at 17:44
It seems you are parsing string(filename) I guess you have PHP and JS on the same page, then you can access PHP returned data into JS. let us know if this is the case you have. — Furquan, Oct 23 '20 at 17:58
Hello mates, thank you for your helpful and superfast responses. The php code sits in a separate file called jquery_gpio.php. I'm sorry about my stupidity, but how do I decode this array correctly, not as a string and request this from the external file? Thank you for your help. — user10104150, Oct 23 '20 at 18:19
Hello @aynber, I do understand now that I'm loading not a file but a string. How can I parse the echo-return, formatted as reported with json_encode from an external php file? Sorry for my stupidity and thanks for your help. — user10104150, Oct 23 '20 at 18:39
@user10104150 I'm guessing you want to call your remote script dynamically, so take a look at [this question](https://stackoverflow.com/questions/2269307/using-jquery-ajax-to-call-a-php-function) or [this one](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) for some examples using jQuery. This will basically help you put the output of that script's execution into a JS variable. — Jeto, Oct 23 '20 at 18:55

JSON parse error - Javascript from PHP json_encode

0 Answers0