How to pass multiple variable from PHP to extenal js file?

Question

I can't pass multiple variable from PHP (after fectch data from mysql) to js extenal file. So if I use echo $x_1 it can pass to #watts_value in html file and display normally.

But I want to pass variable $x_1 to #watts_value and $x_2 to kwh_value . I already try to do that but it just pass all value to the #watts_value .

I have no idea about how to pass variable from php to javascript. Please suggest me or tell me how to do this.

This is my html

<div id="watts_value"></div>
<div id="kwh_value"></div>

This is my main.js

 $(document).ready(function (){ function read(){ $.post("get_db.php", function(data, status){ if(status == 'success'){ $('#watts_value').html(data); } else{ $('#info').html("Error!"); } }); }; read(); setInterval(read,1000); }); 

This is my php file

<?php
$servername="localhost";
$username="root";
$password="";
$dbname="rt_db";
$tbname="rt_data";

$conn=new mysqli($servername, $username, $password, $dbname);
if($conn->connect_error){
    die("Connection failed: ".$conn->connect_error);
}


$sql_1="SELECT * FROM $tbname WHERE SensorId ='1'";
$sql_2="SELECT * FROM $tbname WHERE SensorId ='2'";

$result_1=$conn->query($sql_1);
$result_2=$conn->query($sql_2);

if($result_1->num_rows>0){
    while($row=$result_1->fetch_assoc()){
        $x_1=$row['SensorData'];
        echo $x_1;
    }
}
if($result_2->num_rows>0){
    while($row=$result_2->fetch_assoc()){
        $x_2=$row['SensorData'];
        echo $x_2;
    }
}

else {
    echo "fail";
}

$conn->close();
?>

Answer 1

Use json_encode() in PHP to output a JSON string of an array. Then you can output the result on client side to see the response. It should be a javascript object.

Answer 2

you can put the values you need to pass through a request to an array, json encode it and echo it.

you may find the following thread useful.

Returning JSON from a PHP Script

Hope this helps. :)

Answer 3

The result of your request returns both @$x_1 and @$x_2 as one string. You can return JSON object with keys for x_1 and x_2

Answer 4

I would suggest to create a JSON response to grab the different 'variables':

$jsonObject = ['WattsValue' => [], 'KwhValue' => []];

while($row = $result_1->fetch_assoc()){
    $jsonObject['WattsValue'][] = $row['SensorData'];
}

while($row = $result_2->fetch_assoc()){
    $jsonObject['KwhValue'][] = $row['SensorData'];
}

$conn->close();

header('Content-Type: application/json');
echo json_encode($jsonObject);
http_response_code(200);
exit;

When using jQuery, it'll recognize this as being JSON and giving the ability to use the JSON object directly:

$.post("get_db.php", 
    function(data, status){

    if(status === 'success'){
        $('#watts_value').text(data.WattsValue.join(','));
        $('#kwh_value').text(data.KwhValue.join(','));
    }
});