Error when passing a variable from PHP to js

Question

I'm making several selects in my db and converting the results into an object, then I want to pass the variable to a js file but it's always an error. If I do json_encode() on the variable before sending it, the variable is empty, passing nothing to the js file. But if I remove json_encode() and make console.log() from the variable, Array () {[native code]} appears. When I was running on localhost it was working perfectly, but when I switched to the web hosting server it stopped working and started with errors. If anyone knows how I can solve this, I really appreciate it!

<!DOCTYPE html>
<?php
$numMax = 10; // numero de mesas do restaurante
$mysqli = new mysqli("***","***","***","***");

// Check connection
if ($mysqli -> connect_errno) {
  echo '<script type="text/javascript">console.log("Database failed")</script>';
  header("Refresh:0");
}

$sql = "SELECT * FROM ingredientes";
$i = 0;
if ($result = $mysqli -> query($sql)) {
  while ($obj = $result -> fetch_object()) {
    $ingredientes[$i]['id'] = $obj->id;
    $ingredientes[$i++]['nome'] = $obj->nome;
  }
  $result -> free_result();
}

$sql = "SELECT * FROM pratos";
$i = 0;
if ($result = $mysqli -> query($sql)) {
  while ($obj = $result -> fetch_object()) {
    $pratos[$i]['id'] = $obj->id;
    $pratos[$i]['idName'] = $obj->idName;
    $pratos[$i]['name'] = $obj->name;
    $pratos[$i]['path'] = $obj->path;
    $pratos[$i]['scale'] = $obj->scale;
    $pratos[$i]['escolhido'] = $obj->escolhido;
    $pratos[$i++]['preco'] = $obj->preco;
  }
  $result -> free_result();
}

$sql = "SELECT * FROM prato_ingredientes";
$i = 0;
if ($result = $mysqli-> query($sql)) {
  while ($obj = $result -> fetch_object()) {
    $prato_ingredientes[$i]['idPrato'] = $obj->idPrato;
    $prato_ingredientes[$i++]['idIngredientes'] = $obj->idIngredientes;
  }
  $result -> free_result();
}
$resultado['ingredientes'] = $ingredientes;
$resultado['pratos'] = $pratos;
$resultado['prato_ingredientes'] = $prato_ingredientes;
mysqli_close($mysqli);
?>
<html lang="en">
  <head>
    <link rel="apple-touch-icon" href="./imagens/dimmersions_logo.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>AR Food</title>
    <script src="https://hammerjs.github.io/dist/hammer.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/build/aframe-ar.js"></script>
    <script src="scripts/localforage.js" charset="utf-8"></script>
    <script src="scripts/lodash.js" charset="utf-8"></script>
    <script type="text/javascript">var resultado = '<?= json_encode($resultado); ?>';</script>
    <script src="scripts/scriptIndex.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="./style.css">
  </head>
  <body id="body">
    <?php echo json_last_error_msg();  ?>
    <div id="mesaDiv">
      <p class="order">Table Number</p>
      <select class="formMesa" id="mesaId">
        <?php
          for ($i=1; $i <= $numMax; $i++) {
            echo "<option value='".$i."'>".$i."</option>";
          }
        ?>
      </select>
      <button type="button" class="myButton" id="start">Start</button>
    </div>
    <div class="deletePrato"></div>
    <div id="ordersDiv">
      <p class="close" id="closeOrders">X</p>
      <div id="orderButton">
        <p class="order">Order</p>
      </div>
    </div>
    <div id="escondido" hidden="true">
      <div id="swiper"></div>
      <div id="orderDiv">
        <p class="order">Order</p>
      </div>
      <div id="tituloDiv">
        <p id="nameFood"></p>
      </div>
      <img id="loadingGif" alt="loadingGif" src="./imagens/load.gif">
      <div id="swipeDiv">
        <img id="swipeImg" alt="swipeImg" src="./imagens/swipe.png">
        <p id="swipe">Swipe for next dish</p>
      </div>
      <div id="ingredientesBar">
        <p id="seta">↑</p>
        <p id="ingredientesSwipe">Ingredients</p>
      </div>
      <div id="ingredientsDiv" hidden="true">
        <p class="close" id="closeIngredientes">X</p>
        <ul style="padding: 1em 3em" id="ulIngredientes">
        </ul>
      </div>
    </div>
    <div id="markerInicial">
      <img id="markerOpacidade" alt="markerOpacidade" src="./imagens/pattern-restaurant-menu.png">
      <p id="markerTitulo">Please point to the marker</p>
    </div>
    <a-scene arjs='trackingMethod: best; sourceWidth:1280; sourceHeight:960; debugUIEnabled:false' embedded vr-mode-ui="enabled: false">
      <a-assets id="assets">
      </a-assets>
      <a-marker detect-marker id="marker" preset='custom' type='pattern' url='./markers/pattern-restaurant-menu.patt' smooth="true">
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

<script type="text/javascript">var resultado =<?= json_encode($resultado); ?>;</script>

Data output

array (
  'ingredientes' =&gt; 
  array (
    0 =&gt; 
    array (
      'id' =&gt; '1',
      'nome' =&gt; 'A�ucar',
    ),
    1 =&gt; 
    array (
      'id' =&gt; '2',
      'nome' =&gt; 'Sal',
    ),
    2 =&gt; 
    array (
      'id' =&gt; '3',
      'nome' =&gt; 'Farinha',
    ),
    3 =&gt; 
    array (
      'id' =&gt; '4',
      'nome' =&gt; 'Fermento',
    ),
    4 =&gt; 
    array (
      'id' =&gt; '5',
      'nome' =&gt; 'Lactic�nios',
    ),
    5 =&gt; 
    array (
      'id' =&gt; '6',
      'nome' =&gt; 'Leite',
    ),
    6 =&gt; 
    array (
      'id' =&gt; '7',
      'nome' =&gt; 'Fruta',
    ),
    7 =&gt; 
    array (
      'id' =&gt; '8',
      'nome' =&gt; 'Manteiga',
    ),
    8 =&gt; 
    array (
      'id' =&gt; '9',
      'nome' =&gt; 'Cebola',
    ),
    9 =&gt; 
    array (
      'id' =&gt; '10',
      'nome' =&gt; 'Ovo',
    ),
    10 =&gt; 
    array (
      'id' =&gt; '11',
      'nome' =&gt; 'Nata',
    ),
    11 =&gt; 
    array (
      'id' =&gt; '12',
      'nome' =&gt; 'Chocolate',
    ),
    12 =&gt; 
    array (
      'id' =&gt; '13',
      'nome' =&gt; 'Alho',
    ),
    13 =&gt; 
    array (
      'id' =&gt; '14',
      'nome' =&gt; 'Cenoura',
    ),
    14 =&gt; 
    array (
      'id' =&gt; '15',
      'nome' =&gt; 'Peixe',
    ),
    15 =&gt; 
    array (
      'id' =&gt; '16',
      'nome' =&gt; 'Canela',
    ),
    16 =&gt; 
    array (
      'id' =&gt; '17',
      'nome' =&gt; 'Pimenta',
    ),
    17 =&gt; 
    array (
      'id' =&gt; '18',
      'nome' =&gt; 'Salsa',
    ),
    18 =&gt; 
    array (
      'id' =&gt; '19',
      'nome' =&gt; 'Or�g�os',
    ),
    19 =&gt; 
    array (
      'id' =&gt; '20',
      'nome' =&gt; 'Piment�o',
    ),
  ),
  'pratos' =&gt; 
  array (
    0 =&gt; 
    array (
      'id' =&gt; '1',
      'idName' =&gt; 'sushi',
      'name' =&gt; 'Sushi',
      'path' =&gt; './modelos/sushi/scene.gltf',
      'scale' =&gt; '0.1 0.1 0.1',
      'escolhido' =&gt; '0',
      'preco' =&gt; '24.69',
    ),
    1 =&gt; 
    array (
      'id' =&gt; '2',
      'idName' =&gt; 'burger',
      'name' =&gt; 'Chicken Burger',
      'path' =&gt; './modelos/chicken_burger/scene.gltf',
      'scale' =&gt; '0.12 0.12 0.12',
      'escolhido' =&gt; '0',
      'preco' =&gt; '4.84',
    ),
    2 =&gt; 
    array (
      'id' =&gt; '3',
      'idName' =&gt; 'donut',
      'name' =&gt; 'Donut',
      'path' =&gt; './modelos/donut/scene.gltf',
      'scale' =&gt; '0.4 0.4 0.4',
      'escolhido' =&gt; '1',
      'preco' =&gt; '2.5',
    ),
    3 =&gt; 
    array (
      'id' =&gt; '4',
      'idName' =&gt; 'sobremesa',
      'name' =&gt; 'Milk Pie',
      'path' =&gt; './modelos/sobremesa/scene.gltf',
      'scale' =&gt; '0.08 0.08 0.08',
      'escolhido' =&gt; '0',
      'preco' =&gt; '7.49',
    ),
    4 =&gt; 
    array (
      'id' =&gt; '5',
      'idName' =&gt; 'boloC',
      'name' =&gt; 'Chocolate Cake',
      'path' =&gt; './modelos/bolo_chocolate/scene.gltf',
      'scale' =&gt; '0.08 0.08 0.08',
      'escolhido' =&gt; '0',
      'preco' =&gt; '2',
    ),
    5 =&gt; 
    array (
      'id' =&gt; '6',
      'idName' =&gt; 'boloFV',
      'name' =&gt; 'Red Fruit Cake',
      'path' =&gt; './modelos/bolo_frutos_vermelhos/scene.gltf',
      'scale' =&gt; '0.04 0.04 0.04',
      'escolhido' =&gt; '0',
      'preco' =&gt; '2.5',
    ),
  ),
  'prato_ingredientes' =&gt; 
  array (
    0 =&gt; 
    array (
      'idPrato' =&gt; '5',
      'idIngredientes' =&gt; '12',
    ),
    1 =&gt; 
    array (
      'idPrato' =&gt; '5',
      'idIngredientes' =&gt; '4',
    ),
    2 =&gt; 
    array (
      'idPrato' =&gt; '5',
      'idIngredientes' =&gt; '1',
    ),
    3 =&gt; 
    array (
      'idPrato' =&gt; '5',
      'idIngredientes' =&gt; '3',
    ),
    4 =&gt; 
    array (
      'idPrato' =&gt; '5',
      'idIngredientes' =&gt; '10',
    ),
    5 =&gt; 
    array (
      'idPrato' =&gt; '5',
      'idIngredientes' =&gt; '6',
    ),
    6 =&gt; 
    array (
      'idPrato' =&gt; '6',
      'idIngredientes' =&gt; '1',
    ),
    7 =&gt; 
    array (
      'idPrato' =&gt; '6',
      'idIngredientes' =&gt; '3',
    ),
    8 =&gt; 
    array (
      'idPrato' =&gt; '6',
      'idIngredientes' =&gt; '4',
    ),
    9 =&gt; 
    array (
      'idPrato' =&gt; '6',
      'idIngredientes' =&gt; '6',
    ),
    10 =&gt; 
    array (
      'idPrato' =&gt; '6',
      'idIngredientes' =&gt; '7',
    ),
    11 =&gt; 
    array (
      'idPrato' =&gt; '2',
      'idIngredientes' =&gt; '2',
    ),
    12 =&gt; 
    array (
      'idPrato' =&gt; '2',
      'idIngredientes' =&gt; '3',
    ),
    13 =&gt; 
    array (
      'idPrato' =&gt; '2',
      'idIngredientes' =&gt; '4',
    ),
    14 =&gt; 
    array (
      'idPrato' =&gt; '2',
      'idIngredientes' =&gt; '10',
    ),
    15 =&gt; 
    array (
      'idPrato' =&gt; '2',
      'idIngredientes' =&gt; '12',
    ),
    16 =&gt; 
    array (
      'idPrato' =&gt; '2',
      'idIngredientes' =&gt; '14',
    ),
    17 =&gt; 
    array (
      'idPrato' =&gt; '2',
      'idIngredientes' =&gt; '20',
    ),
    18 =&gt; 
    array (
      'idPrato' =&gt; '4',
      'idIngredientes' =&gt; '1',
    ),
    19 =&gt; 
    array (
      'idPrato' =&gt; '4',
      'idIngredientes' =&gt; '5',
    ),
    20 =&gt; 
    array (
      'idPrato' =&gt; '4',
      'idIngredientes' =&gt; '7',
    ),
    21 =&gt; 
    array (
      'idPrato' =&gt; '4',
      'idIngredientes' =&gt; '11',
    ),
    22 =&gt; 
    array (
      'idPrato' =&gt; '4',
      'idIngredientes' =&gt; '16',
    ),
    23 =&gt; 
    array (
      'idPrato' =&gt; '1',
      'idIngredientes' =&gt; '3',
    ),
    24 =&gt; 
    array (
      'idPrato' =&gt; '1',
      'idIngredientes' =&gt; '5',
    ),
    25 =&gt; 
    array (
      'idPrato' =&gt; '1',
      'idIngredientes' =&gt; '7',
    ),
    26 =&gt; 
    array (
      'idPrato' =&gt; '1',
      'idIngredientes' =&gt; '10',
    ),
    27 =&gt; 
    array (
      'idPrato' =&gt; '1',
      'idIngredientes' =&gt; '13',
    ),
    28 =&gt; 
    array (
      'idPrato' =&gt; '1',
      'idIngredientes' =&gt; '15',
    ),
    29 =&gt; 
    array (
      'idPrato' =&gt; '1',
      'idIngredientes' =&gt; '18',
    ),
    30 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '2',
    ),
    31 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '3',
    ),
    32 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '4',
    ),
    33 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '8',
    ),
    34 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '10',
    ),
    35 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '11',
    ),
    36 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '12',
    ),
    37 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '13',
    ),
    38 =&gt; 
    array (
      'idPrato' =&gt; '20',
      'idIngredientes' =&gt; '18',
    ),
    39 =&gt; 
    array (
      'idPrato' =&gt; '3',
      'idIngredientes' =&gt; '1',
    ),
    40 =&gt; 
    array (
      'idPrato' =&gt; '3',
      'idIngredientes' =&gt; '3',
    ),
    41 =&gt; 
    array (
      'idPrato' =&gt; '3',
      'idIngredientes' =&gt; '4',
    ),
    42 =&gt; 
    array (
      'idPrato' =&gt; '3',
      'idIngredientes' =&gt; '8',
    ),
    43 =&gt; 
    array (
      'idPrato' =&gt; '3',
      'idIngredientes' =&gt; '9',
    ),
    44 =&gt; 
    array (
      'idPrato' =&gt; '3',
      'idIngredientes' =&gt; '12',
    ),
  ),
)

You are giving an error in the special characters which before in localhost did not happen

What are the data-sets from `$resultado` on the dev and production environments? EG: `` — Will B., Jul 23 '20 at 04:14
@fyrye `$resultado` is the result of all the queries I made to db and basically all the info for the app to work — Gonçalo Pereira, Jul 23 '20 at 04:17
Try to echo json_encode inside quotes. `var resultado ='= json_encode($resultado); ?>';` — HVD, Jul 23 '20 at 04:18
@GonçaloPereira Yes, I am asking for that data. use `var_export($resultado);` to output the data onto the console/browser, then update your question with the data of both outputs from localhost and web server — Will B., Jul 23 '20 at 04:18
Why wrong @Phil? json_encode will turn array|object into string. And in javascript, string need to be placed inside a quote or a double quote. — HVD, Jul 23 '20 at 04:22
@HVD I tried your solution and just passed the empty variable to js — Gonçalo Pereira, Jul 23 '20 at 04:27
@HVD `json_encode()` will output a JSON, that is represented as `{"property": "value"}`, which can be declared in ECMAScript as `var r = { };`, otherwise when wrapped in quotes, will be represented as a string and not as JSON. — Will B., Jul 23 '20 at 04:28
@GonçaloPereira if `json_encode()` is producing an empty result, then it means it encountered an error. Try adding [`echo json_last_error_msg();`](https://www.php.net/manual/en/function.json-last-error-msg.php). Chances are it's something to do with unicode characters — Phil, Jul 23 '20 at 04:31
I see @Phil and fyrye. Thank both of you. Don't know why in my project. Echo json_encode without quotes it causes some errors... — HVD, Jul 23 '20 at 04:35
@GonçaloPereira From the � characters, it appears you have an encoding issue. What encoding is set for PHP, the database and in the response headers? — Will B., Jul 23 '20 at 04:37
@fyrye I updated with all my file, in relation to the db it was not me who set it up, it came with web hosting that I bought so I'm not sure — Gonçalo Pereira, Jul 23 '20 at 04:42
For the database, [you'll need to check](https://www.php.net/manual/en/mysqlinfo.concepts.charset.php), most shared web hosts will use `latin1` instead of UTF-8 - which you appear to need UTF-8. PHP 5.6+ should be configured as UTF-8 by default, but [you'll need to validate](https://www.php.net/manual/en/ini.core.php#ini.default-charset). `echo ini_get('default_charset');` Since the HTML is reporting as UTF-8, you should be fine as long as it matches PHP. I recommend moving your PHP code above the ` ` — Will B., Jul 23 '20 at 04:51

Error when passing a variable from PHP to js

0 Answers0