Динамически добавить ссылку со строковым параметром

Question

У меня есть ссылка REST backend link mywebsite/guests, которая возвращает список гостей. В передней части я хочу отображать гостей в качестве ссылок. Вот код

for(guest of guests) { 
    $('#guest_list').append('<a onclick="showGuest(' + guest.id + ')">' + guest.name + '</a><br>') 
} 

function showGuest(id) { 
    console.log(id) 
    ... 
} 

Следует отметить, что guest.id является строкой.

Консоль всегда печатает undefined. Мой вопрос, как я могу добавить эти ссылки со строковыми параметрами?

Answer 1

for(guest of guests) { 
    $('#guest_list').append('<a onclick="showGuest(this)" data-id='+guest.id+'>' + guest.name + '</a><br>') 
} 

function showGuest(this) { 

console.log($(this).data('id')) 
} 

Answer 2

Путь подойти к этой проблеме зависит от формата и содержания переменной guests. Если вы начали с этим объектом:

var guests = { 
    '123': {id: 123, name: 'joe'}, 
    '234': {id: 234, name: 'jane'} 
}; 

Тогда key будет «123» и «234» в следующем цикле, а значения объекта будет guests[key]:

for(var key in guests) { 
    $('#guest_list').append('<a onclick="showGuest(' + guests[key].id + ')">' + guests[key].name + '</a><br>') 
} 

function showGuest(id) { 
    console.log(id) 
    ... 
} 

Но если вы уже используя jQuery, посмотрите на jQuery.each для другой опции цикла.

---

С другой стороны, если guests является массивом, как:

var guests = [ 
    {id:"123", name:"joe"}, 
    {id:"234", name:"jane"} 
]; 

тогда вы просто хотите использовать что-то вроде:

for(var i=0; i < guests.length; i++) { 
    // id is guests[i].id 
    // name is guests[i].name 
} 

Answer 3

Основная проблема заключается в том, что вы пытаетесь получить доступ к свойствам динамически связанных элементов DOM в вашей функции showGuest(id). Вы должны использовать функцию onClick в следующего ПУТИ

var guests = [{"id":1, "name":"John Doe"}, 
       {"id":2, "name":"David Jones"}]; 

for(guest of guests) { 
    $('#guest_list').append('<a class="guest" data-id="'+guest.id+'">' + guest.name + '</a><br>'); 
} 

$('#guest_list').on('click', 'a.guest', function() { 
    var id = $(this).attr('data-id'); 
    $('.message').text('').append("Clicked guest with ID: "+id); 
}); 

Рабочей JSFiddle здесь - https://jsfiddle.net/2dkpsve8/

Надеется, что это помогает!

Answer 4

Поразительно,

$('#guest_list').append('<a onclick="showGuest(' + "guest.id" + ')">' + guest.name + '</a><br>')

работает отлично! Я не знаю, как это сделать. "guest.id" заменяется фактическим идентификатором гостя.