How to pass php json array into a JavaScript function via onclick

Question

I have to pass a PHP JSON array into a JavaScript function's on click event.

Before JSON encode PHP array structure:

Array
(
    [group_id] => 307378872724184
    [cir_id] => 221
)

After JSON encode array structure:

{"group_id":"307378872724184","cir_id":"221"}

The PHP JSON array looks like:

if(!empty($cirGrpArr))

   $jsonGrpArr = json_encode($cirGrpArr);

I need to pass the same into a javascript on click function like below:

<span onclick="Login(this,JSON.stringify('<?php echo $jsonGrpArr; ?>'))">click here</span>

The PHP JSON array is available in this page but how to pass it on click function so that i can iterate this JSON array to do some other stuff.

Answer 1

You can pass encoded object in function by this method.

*.php

<a class="pointer" href="javascript:void(0)"  onclick="return pass( event.target.dataset.param)" data-param="<?php echo htmlspecialchars(json_encode(array('key'=>value))) ?>">Click it</a>

*.js

function pass(json_string='{}'){
    let data=JSON.parse(json_string);
    let value=data['key']??'';
    console.log('value',value);
}

Answer 2

<span onclick="Login(this,'<?php echo $jsonGrpArr; ?>')">click here</span>

and

function Login(e, jsonString){
var data = JSON.parse(jsonString);
}