The question is published on by Tutorial Guruji team.
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;
}