如何将MySQL查询数据传递给JavaScript变量？

Question

Here am getting data from mysql..

if (!empty($result1)) {
    while ($row1 = mysqli_fetch_array($result1)) {
        $caseno = $row1['cases'];
        echo "<b>" . $caseno . "<br>";
    }
}

and i want pass the data which is there in $caseno to my below JavaScript..

<script type="text/javascript">
    var gaugevalue = document.getElementById("$caseno");
    var myConfig2 = {
        "type": "gauge",
        "scale-r": {
            "aperture": 200, //Scale Range
            "values": "0:50:10" //and minimum, maximum, and step scale values.
        },
        "series": [{"values": [gaugevalue]}]
            //"series":[{"values":[40]}]

    };

    zingchart.render({
        id: 'myChart',
        data: myConfig2,
        height: "90%",
        width: "90%"
    });

</script>

Answer 1

I analyzed your code more attentively and noticed that gaugevalue must be an array of integers, while you are trying to pass to it a DOM element. So your full code should look like this:

<?php
$gauge_values = [];
if (!empty($result1)) {
    while ($row1 = mysqli_fetch_array($result1)) {
        $gauge_values[] = $row1['cases'];
    }
}
?>

<script type="text/javascript">
    var myConfig2 = {
        "type": "gauge",
        "scale-r": {
            "aperture": 200, //Scale Range
            "values": "0:50:10" //and minimum, maximum, and step scale values.
        },
        "series": [{"values": <?php echo json_encode($gauge_values); ?>}]
    };

    zingchart.render({
        id: 'myChart',
        data: myConfig2,
        height: "90%",
        width: "90%"
    });
</script>

Answer 2

Try this way instead:

<script type="text/javascript">
    var gaugevalue = "<?php echo $caseno ?>";
    var gaugevalue = "<?= echo $caseno ?>"; //for shorthand
</script>

Answer 3

1st Method:

In your php code, you can do:

$caseno = $row1['cases'];

In your javascript code, you can do:

var gaugevalue = "<?php echo $caseno ?>";

2nd Method:

In your php code, you can do:

echo '<input type="hidden" id="caseno" value="'.$caseno.'">';

In your javascript code, you can do:

var gaugevalue = document.getElementById("caseno");

It's simple and easy.

Answer 4

put you JavaScript in php:

<?php
echo "
<script type="text/javascript">
    var gaugevalue = document.getElementById("$caseno");
    var myConfig2 = {
    "type":"gauge",
    "scale-r":{
    "aperture":200, //Scale Range
    "values":"0:50:10" //and minimum, maximum, and step scale values.
    },
    "series":[{"values":[gaugevalue]}]
    //"series":[{"values":[40]}]

    };

    zingchart.render({ 
    id : 'myChart', 
    data : myConfig2, 
    height : "90%", 
    width: "90%"
    });

</script>
"
?>

You can pass your variable like this.