Блог

У меня есть объект, который я получаю с сервера, и я хотел бы как-то отобразить. С чем я борюсь, так это передать один элемент одной кнопке. На веб-странице я буду отображать список вещей, связанных с одиночным проигрывателем и кнопкой. Что я хотел бы сделать, так это то, что если я нажму на кнопку какого-либо проигрывателя, я хотел бы передать информацию, относящуюся к этому объекту. Но javascript говорит, что у меня есть неожиданный идентификатор как ошибка. Как я могу передать один объект массива, когда я нажимаю эту кнопку?

• Пример объекта player

 [
    {"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;
}
 

Делая '...' players[index] '...' это, вы фактически преобразуете объект в строку. Если ваша players переменная является глобальной, вы можете просто вставить имя переменной в 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> '
 

В противном случае (и предпочтительнее) вы можете создать свою структуру элементов (с помощью ванили или библиотек) и ввести свою переменную в обратный вызов кнопки.

С ванилью было бы так:

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