How to loop through data from php in javascript?

Question

I want to ask how to the repeat a region in javascript? The data are dynamic and I want to find all items through php do...while loop:

<script type="text/javascript">

    window.onload = function () {
    <?php do{ ?>
        var chart<?php echo $row_RecAllAnswers['q_id']; ?> = new CanvasJS.Chart("<?php echo $row_RecAllAnswers['q_id']; ?>", {
            theme: "theme2",//theme1
            title:{
                text: "No. " + "<?php echo $row_RecAllAnswers['q_id']; ?>"              
            },
            animationEnabled: true,   // change to true
            data: [              
            {
                // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                type: "column",
                dataPoints: [
                    { label: "A" ,  y: <?php echo $row_RecAllAnswers['A']; ?>  },
                    { label: "B", y: <?php echo $row_RecAllAnswers['B']; ?>  },
                    { label: "C", y: <?php echo $row_RecAllAnswers['C']; ?>  },
                    { label: "D",  y: <?php echo $row_RecAllAnswers['D']; ?>  }
                ]
            }
            ]
        });
        chart<?php echo $row_RecAllAnswers['q_id']; ?>.render();
        chart<?php echo $row_RecAllAnswers['q_id']; ?> = {};
        window.alert(<?php echo $row_RecAllAnswers['q_id']; ?>);
        <?php } while ($row_RecAllAnswers = mysql_fetch_assoc($RecAllAnswers));  ?> 
    }

</script>

@JayBlanchard But how to repeat the javascript area according how many rows in database? Thanks — Alan Wan, May 19 '15 at 02:29
It is unclear what you're trying to do with your JavaScript, but you could write JavaScript that loops through your DOM elements. In addition, please, [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and consider using PDO, [it's not as hard as you think](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, May 19 '15 at 11:25

score 0 · Answer 1 · answered May 19 '15 at 07:37

0

Use json_encode to convert your mysql query result to JSON.
Write the JSON to your HTML.
In Javascript use a foreach on the JSON array to iterate.

answered May 19 '15 at 07:37

psaniko

1,180
16
17

score 0 · Answer 2 · answered May 19 '15 at 07:39

json encode that php array into a javascript variable and then loop through that variable. In twig I do it like this:

var objectName = {{ phpVariable|json_encode|raw }};

so I think this should work find in PHP (did not test it):

var objectName = <?php echo json_encode($phpVariable); ?>;

Then the javascript variable 'objectName' will contain your data and now you can use regular javascript to loop through the data. You can also use underscore as it is easier.

_.each(objectName, function(item, key){
//do stuff here
});

How to loop through data from php in javascript?

2 Answers2