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 — Alexander Nied
– Alexander Nied, Commented Jul 26, 2017 at 3:47
@AlexanderNied Its answer is use json_encode(), which is just what I'm trying to do. — Ed Chen
– Ed Chen, Commented Jul 26, 2017 at 3:57

RichGoldMD · Accepted Answer · 2017-07-26 03:56:15Z

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, 2017 at 3:56

RichGoldMD

1,2821 gold badge10 silver badges18 bronze badges

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

3 Comments

Ed Chen Over a year ago

Thanks for your suggestion ! But the alert message shows "undefine". It doesn't show the value of the array...

RichGoldMD Over a year ago

Strange - its working perfectly for me. Can you view source in your browser and share?

Ed Chen Over a year ago

Oops...sorry .... I just got a typo... It works now !!!! Thank you so much !!!!!!!!!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related