Looping Issue - AJAX/jQuery - php

Question

So i spent some time over night adding user pictures to a voting feature we have, and all is working nicely, however we notice that as users pictures show up as who voted, it repeats the results twice, instead of a row of pictures going across per item.
So per item, users picture (who voted on the poll ID) shows up but duplicates the row.
Does this have to do with $.each() ? How can I iterate the photos across each row (id column) without creating a copy of the answer and not show only 1 picture?
function fetchPollData() {
$(function(){});
$.ajax({
url: "ajax_pollresults.php",
method: "GET",
dataType: 'JSON',
success: function (data) {
var html_to_append = '';
$.each(data, function (i, item) {
var scase = (item.votes > 1) ? 'votes' : 'vote';
html_to_append +=
'<div class="content poll-result"><div class="wrapper"><div class="poll-question"><p>' +
item.title +
' - <span style="font-weight:bold">' + item.votes + ' ' + scase + ' <img class="tooltip-polluser" title="' + item.username + ' - Voted: ' + item.title + '" href="/user/?id=' + item.user_id + '" style="width:25px;height:25px;border-radius:50%;margin-left:10px;vertical-align:middle" src="/' + item.avatar + '" /></span></p><div class="result-bar" style="width:' + roundVotes(item.votes) + '%"><b>' + item.votes + '</b> ' + scase + ' </div></div></div></div>';
});
$("#recent-poll").html(html_to_append);
$('.tooltip-polluser').tooltipster({
animation: 'grow',
delay: 200,
theme: 'tooltipster-punk'
});
}
});
}
fetchPollData();
setInterval(function () {
fetchPollData()
}, 10000);
The bug we cant figure out a fix for:
It seems it is only showing 1 user per voted item, and ignoring the rest of the row.
our SQL query:
SELECT
poll_answers.id AS id,
IFNULL(poll_users.user_id, '') AS user_id,
IFNULL(users.username, '') AS username,
poll_answers.poll_id,
poll_answers.title,
poll_answers.votes,
poll_users.added AS date,
IFNULL(users.avatar_thumb,
'images/poll_avatarfix.png') AS avatar
FROM
poll_answers
LEFT JOIN
poll_users ON poll_users.poll_id = poll_answers.poll_id
LEFT JOIN
users ON users.user_id = poll_users.user_id
And the database results:
I spent a fair bit of the evening writing this SQL query, so I'm not sure if this is the query not bringing all avatars out or if its jQuery.
Any help is greatly appreciated!

Answer 1

You will want to get each voter image in an inner loop. You can do something like the following...
Instead of using just the one record, call something like getVoteImages() and pass in the poll id you are looking for. This will get all of your images and append them to a string then return it. There may be faster, more elegant ways to do it, but this should work.
$.each(data, function (i, item) {
var scase = (item.votes > 1) ? 'votes' : 'vote';
html_to_append +=
'<div class="content poll-result"><div class="wrapper"><div class="poll-question"><p>' +
item.title +
' - <span style="font-weight:bold">' + item.votes + ' ' + scase + getVoteImages(data, item.poll_id) + "</span></p><div class="result-bar" style="width:' + roundVotes(item.votes) + '%"><b>' + item.votes + '</b> ' + scase + ' </div></div></div></div>';
});
function getVoteImages(data, poll_id) {
var images = "";
$.each(data, function (i, item) {
if (item.poll_id == poll_id) {
images += ' <img class="tooltip-polluser" title="' + item.username + ' - Voted: ' + item.title + '" href="/user/?id=' + item.user_id + '" style="width:25px;height:25px;border-radius:50%;margin-left:10px;vertical-align:middle" src="/' + item.avatar + '" />';
}
});
return images;
}