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; }