难以使用javascript中接收的php json_encode数据来使用chart.js库显示图形

Question

I am trying to display a graph using chart.js javascript library. The data I am fetching from database in PHP code and sending it to javascript by using json_encode() method to get in js var from PHP. The data actually is two fields of a table 'humidity' & 'temperature'. After receiving the data in js, when I try to fetch 'humidity' & 'temperature' values from the js object I received, I get TypeError: jData is undefined at line hum = jData.humidity; where jData is the parameter in js function receiving data from the script in PHP.

I try to parse the jData to convert it into js object before fetching values but then I receive SyntaxError: JSON.parse: unexpected character at line wData = JSON.parse(jData); . Few posts on SO with same error tells that I the parse shouldn't be used as jData is already in js object form.

Here is my code:

php code:

 foreach($stmt->fetchAll() as $k=>$v) {       
      $WData[] = $v;
    }
    ?>

    <script>
      var WData = <?php echo json_encode($WData);?>;
      console.log(WData);
      dspChrt(WData);
    </script>

js code:

function dspChrt(jData) { // to be called by loadChart() to render live chart

        //wData = JSON.parse(jData); 
        hum = jData.humidity;
        tem = jData.temperature;
        humArray.shift();
        humArray.push(hum);
        temArray.shift();
        temArray.push(tem);

        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
        labels: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'],
        datasets: [{
        label: 'Humidity',
        data: humArray, // json value received used in method
        backgroundColor: "rgba(153,255,51,0.4)"
            }, {
        label: 'Temprature',
        data: temArray,
        backgroundColor: "rgba(255,153,0,0.4)"
        }]
        }
    }); 
    }

Answer 1

With my previous experience on rendering the PHP json data inside JS, I could get it by rendering it as a string and then parse it. Something like this.

var WData = "'"+<?php echo json_encode($WData);?>+"'";
 jData= JSON.parse(wData);