How to pass an php associative array as argument to Javascript function with json_encode()

Question

I can sucessfully pass an index array to the javascript function with below code. For example:

<?php
$arr = array(1, 2, 3);
?>
<button onclick="test(<?=json_encode($arr)?>);">test</button>
<script>
function test(x){
  alert(x[0]);
  alert(x[1]);
  alert(x[2]);
}
</script>

Now I want to change the array to be an associative array. However, it doesn't work any more...

Is there any problem with my code ?

How should I fix it? Thank you very much !

My code is as below:

<?php
$arr = [ "A" => 1, "B" => 2, "C" => 3 ];
?>
<button onclick="test(<?=json_encode($arr)?>);">test</button>
<script>
function test(x){
  alert(x["A"]);
  alert(x["B"]);
  alert(x["C"]);
}
</script>

Possible duplicate of [convert php associative array into javascript object](https://stackoverflow.com/questions/21153805/convert-php-associative-array-into-javascript-object) — Alexander Nied, Jul 26 '17 at 03:47
@AlexanderNied Its answer is use json_encode(), which is just what I'm trying to do. — Ed Chen, Jul 26 '17 at 03:57

score 4 · Accepted Answer · answered Jul 26 '17 at 03:56

4

The quotes in the generated JSON confuse the html parser. You need to entity encode the contents of tag attributes. You can use htmlspecialchars() or htmlentities() for this:

<?php
$arr = [ "A" => 1, "B" => 2, "C" => 3 ];
?>
<button onclick="test(<?=htmlentities(json_encode($arr))?>);">test</button>
<script>
function test(x){
  alert(x["A"]);
  alert(x["B"]);
  alert(x["C"]);
}
</script>

answered Jul 26 '17 at 03:56

RichGoldMD

1,252
1
10
18

Thanks for your suggestion ! But the alert message shows "undefine". It doesn't show the value of the array... – Ed Chen Jul 26 '17 at 04:06
Strange - its working perfectly for me. Can you view source in your browser and share? – RichGoldMD Jul 26 '17 at 04:09
Oops...sorry .... I just got a typo... It works now !!!! Thank you so much !!!!!!!!! – Ed Chen Jul 26 '17 at 04:12

How to pass an php associative array as argument to Javascript function with json_encode()

1 Answers1