How to pass varaiable in HTML functions through jquery

Question

this is my html code. group.participants is an array.

result +=`<button class="gsb-${group.id}" onclick="demo(${group.participants})">`+"DEMO"+`</button><br/>`;

this is my simple javascript code to display the array from the parameter

 function demo(participants){
 alert(participants);
 }

this shows me the error

Uncaught SyntaxError: Unexpected end of input

may I know what is the problem

• fdomn-m: Unexpected end of input is likely unrelated to the code you've provided, but can be easily tested by removing the php(?) parts, eg result +=`<button>DEMO</button><br/>`; to see if you still get the same error. If you don't then it will be caused by the content (actual values) of group.participants (or, less likely, group.id)

Answer 1

With Jquery you can use the following to pass data to a selector

$(`.gsb-${group.id}`).data(group.participants); 

to recover it you just have to call data() method

$(`.gsb-${group.id}`).data(); 

Finally like each group have different participants, you will have to append first the group button before add the data to it

result.append(`<button class="gsb-${group.id}" onclick="demo(${group.id})">`+"DEMO"+`</button><br/>`);
$(`.gsb-${group.id}`).data(group.participants);

 function demo(groupId) {
 var participants = $(`.gsb-${groupId}`).data();
 console.log(participants);
 }
 var result = $('#result');
 var group = {
 id:1,
 participants:[
 {name:'test1'},
 {name:'test2'}
 ]
 }
 result.append(`<button class="gsb-${group.id}" onclick="demo(${group.id})">`+"DEMO"+`</button><br/>`);
 $(`.gsb-${group.id}`).data(group.participants);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result"></div>

• Venkat Cpr: yeah I'm using jqery and it's not working
• DarkBee: Well, you cleary said that participants is an array, so you will need to expand your array first e.g. data-participants="${group.participants.join(',')}"
• fdomn-m: If you're using jquery then use $(this).data("participants") - and use jquery event binding rathee than onclick - will save you a ton of headaches trying to get onclick= to work.