Passing a PHP array to a JavaScript array inside a PHP function

Question

I know this question has been asked a lot on Stack Overflow, although I can't find any solution that can be applied to my problem.

I'm working on a platform that regroups all videos and pictures of my company (I'm taking back the project after my ex-coworker), my issue is on the Lightbox that displays the pictures.

I have a PHP function that returns HTML/CSS/JavaScript in string format like this:

$block = '<div id="myModal" class="modal" style="margin:auto">'
 .'<span style="float:right;margin-right:33px"><a href="'.HTTP_IHM_PATH.'Suppression.php?id='.$records[$i]['Access_Key'].'" onclick="return confirm(\'Êtes-vous sûr de vouloir continuer cette suppression ? Elle sera définitive.\');"><img src="'.HTTP_IMG_PATH.'corbeille.jpg" style="width:20px;height:auto;"></a></span>'
 .'<span class="close cursor" onclick="closeModal()" style="color:#585858; font-size:60px;float:right;">&times;</span>'
[...]
return $block;

I call the function like this : <?php echo function() ?>

In here, I have a PHP array $records that contains all information about the pictures I want to display in my LightBox, I want later in my code to use those information into my JavaScript functions.

I've heard that I can translate the array in JavaScript by using <script>var records = <?php json_encode($records) ?></script> but it doesn't work!

In the end what I want to do is when the user clicks on a picture, it opens up my LightBox and for every pictures he is watching, I want to call my PHP function UpdateViews() that add 1 to the number of views of the picture.

I tried using Ajax, but since it's pretty new to me I may be doing stupid mistakes (this is still in string format in the variable $block):

$block .= '//getSlideIndex returns slideIndex which is the id of the <img/>
$(\'#\' + getSlideIndex()).on(\'click\', function (){
 alert("Ok onclick" + records[getSlideIndex()]["Access_Key"];
 //"Access_Key" is the property I need (primary key of the table)
 $.ajax({
 type:\'GET\',
 url: \'/picture.php\',
 data: {id=\' + records[getSlideIndex()]["Access_Key"] + \'},
 success: function(data){
 alert(\'success\' + data);
 },
 error: function(exception){
 alert(\'Exception: \' + exception);
 }
 });
 e.preventDefault();
 });';

NOTE: My ex-coworker already used some Ajax in his code, so at the time I'm on this page, a $_GET is already set: Will I be able to make my ajax work in this case?

Thank you if you read until this point, I hope you can help me get on the right track.

• Jeff Huijsmans: To be that guy: please think about seperating front- and backend, fetch your JSON with an endpoint which is the PHP part. That way, it won't become a complicated mess like this. Sorry for being pedantic.

Answer 1

I've heard that I can translate the array in javascript by using <script>var records = <?php json_encode($records) ?></script> but it doesn't work !

That doesn't work because you didn't echo the result, you're simply running the JSON process and then discarding the result. Add an echo:

<script>var records = <?php echo json_encode($records) ?></script>

and contrary to the other answer, do not try to JSON.parse this because it is already a valid JavaScript object.

Edit: if you're trying to concatenate the JSON to a response string then don't use <?php tags, instead you can do:

$block .= '<script>var records = ' . json_encode($records) . '; </script>';

• Natty: Thanks for your answer ! I still get an error though : SyntaxError: expected expression, got '<' . How can I make the code interpret PHP in a <script> markup ? Since all of this code is activated by an echo function()

Answer 2

I've heard that I can translate the array in javascript by using <script>var records = <?php json_encode($records) ?></script> but it doesn't work !

That's pretty close. This will make a JavaScript variable that's a JSON string. You can then use JavaScript's JSON parse to convert that JSON string back into an Array/Object.

Once you do all of that, you will have a JavaScript array with data delivered from your PHP array.