How can I use an array I created with php in a js function

Question

I wrote a tool, that creates an array from a database (when the site is loaded) in php and would now like to use js functions to change the way this array is displayed in a table (different ranges, columns etc.).

How can I pass the php array to js, so I can use it in the js functions.

already tried this in the "script" section

   <?php
        $js_data = json_encode($data);
        echo"var data = ".$js_data.";\n";
    ?>
    function loadCompleteTable(){

        table += '<table>';

        for(var row in data){
            table += '<tr>';
            for(var col in data[row]){
                table += '<td>';
                table += data[row][col];
                table += '</td>';
            }
            table += '</tr>';
        }

        table += '</table>';
        document.getElementById("tablePlaceholder").innerHTML = table;
    }

@u_mulder found the first mistake, forgot "var table = ''; " — M Splett
– M Splett, Commented Jul 5, 2019 at 7:51

François Huppé · Accepted Answer · 2019-07-09 17:59:26Z

1

You can pass an array from PHP to javascript like this:

var js_array = JSON.parse('<?php echo json_encode($php_array); ?>');

Or if you prefer:

echo "var js_array = JSON.parse('".json_encode($php_array)."');";

I know you could just use:

var js_array = <?php echo json_encode($php_array); ?>;

But i find it less reliable. Unfortunately, I can't find anything in the docs to prove what I am saying, but I had some troubles in the past, mostly SyntaxError, that was resolved by using JSON.parse instead of just echoing the array as javascript code.

edited Jul 9, 2019 at 17:59

answered Jul 9, 2019 at 17:17

François Huppé

2,1161 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vinod Bhatia · Accepted Answer · 2019-07-05 07:51:00Z

0

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

    function loadCompleteTable()
    {
           var table = '';
            table += '<table>';

            for(var row in data){
                table += '<tr>';
                for(var col in data[row]){
                    table += '<td>';
                    table += data[row][col];
                    table += '</td>';
                }
                table += '</tr>';
            }

            table += '</table>';
            document.getElementById("tablePlaceholder").innerHTML = table;
        }

edited Jul 5, 2019 at 7:51

answered Jul 5, 2019 at 7:45

Vinod Bhatia

1114 bronze badges

Collectives™ on Stack Overflow

How can I use an array I created with php in a js function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related