pass a php array into js

[ajoo]

Hi all !

This following code is supposed to pass an array from php to js:-

$( document ).ready(function(){
	alert('Yo');
	var rs = <?php echo json_encode($rs);?>;
	alert(rs);
});

instead javascript gives an error as 

Quote

testsums.js:3 Uncaught SyntaxError: Unexpected token <

Here's the simple php code as well:

<?php 
	$rs = [[1,2,3],[2,3,4],[3,4,5]];
	// $rs = json_encode($rs);		// This doesn't work either.
?>
	

Please can someone point out the cause of error here. 

Thanks !

 

[Barand]

Use a hidden field

<?php 
    $rs = [[1,2,3],[2,3,4],[3,4,5]];
    $jrs = json_encode($rs);
    echo "<input id='rs' type='hidden' value='$jrs'>";
?>

then

  <script type="text/javascript">
      $().ready( function() {
          var rs = JSON.parse( $("#rs").val() )
          alert( rs[2][0] )                         // 3
      })
  </script>

 

[ajoo]

Thank you Guru Barand !

While the above works fine when the js is enclosed in <script> tags and appended to the php file, it fails when the JS code is included as a separate js file. 

I guess the only way it works when the JS code is in its own file is as indicated by you, using a hidden field ! 

Thank you very much ! 

[kicken]

Trying to inject code directly into JS like in your original post is risky.  Someone may be able to use it to inject html/js into the document.  The better approach is to insert the JSON data into your HTML document (with normal HTML escaping applied) and then parse it.  A hidden input is one way to do that, another way is with a data attribute which is what I typically do (jQuery will auto-parse json data attributes).

<script src="/js/something.js" data-rs="[[1,2,3],[2,3,4],[3,4,5]]"></script>

var rs = $(document.currentScript).data('rs');

document.currentScript needs to be read during the initial script load, you can't put it in an event handler for example.  According to caniuse.com, it also doesn't work in IE. If that's a concern, there are alternative methods / polyfills that exist.

 

[ajoo]

Thanks kicken ! for this alternate method. I do not fully understand it, but i'll look it up and if need be reopen this thread again. For the time being I have used the hidden field method suggested by Guru Barand !

Thanks loads !