Passing single element of an array to a click function?

I have an object that I receive from the server and I would like to display somehow. What I am struggling, is to pass a single element to the single button. On the webpage I will be displaying a list of things related about the single player and the button. What I would like to do is, if I click on the button of something player, I would like to pass the information related to that object. But javascript says that I have an unexpected identifier as error. How can I pass a single object of an array when I click that button?

Example of player object

[
    {"player":"something", "help":"", "secOnTask":12}, 
    {"player":"ran", "help":"", "secOnTask":13}
]

function trialtry(player) {
    alert('hello');
    console.log(player);
}

//function that receives object players from the server
function setTPlayerTemplate(players) {
    var playerHtml = [];
    for (let index = 0; index < players.length; index++) {
        playerHtml[index] = 
            '<div class = "user">
                <button onclick="trialtry('+players[index]+')">'+players[index].player+'</button>
                <ul class="list-group">
                    <li class="list-group-item">Time: '+players[index].secOnTask+'</li>
                </ul>
            </div>'
    }
    return playerHtml;
}

Answer

By doing '...' + players[index] + '...' you are actually converting the object into a string. If your players variable is a global you can just plug the name of the variable into the html:

playerHtml[index] = '<div class = "user">
            <button onclick="trialtry(players[index])">' + // Note here there are no ''
 players[index].player+'</button>
             <ul class="list-group">
             <li class="list-group-item">Time: '+players[index].secOnTask+'</li>
            </ul>
            </div> '

Otherwise (and preferrable) you can create your element structure (with vanilla or libraries) and inject your variable into the button callback.

With vanilla would be like this:

function createPlayerElement(player) {
  var $user = document.createElement('div');
  $user.classList.add('user');

  var $button = document.createElement('button');
  button.addEventListener('click', function() { trialtry(player); });
  button.innerText = player.player;

  var $ul = document.createElement('ul');
  $ul.classList.add('list-group');

  var $li = document.createElement('li');
  $li.classList.add('list-group-item');
  $li.innerText = 'Time: ' + player.secOnTask;

  $ul.appendChild($li);
  $user.appendChild($button);
  $user.appendChild($ul);

  return $user;

}

function setTPlayerTemplate(players) {
        var playerHtml = [];
        for (let index = 0; index < players.length; index++) {
            playerElements.push(createPlayerElement(players[i]));
        }
        // Here we don't return flat HTML but the elements to be appended to your container
        return playerHtml; 
}

Answer

Leave a Reply Cancel reply