Why is Incorrect data being returned from query runs?

Question

Using Parse.com and JavaScript SDK.

http://www.kudosoo.com/friendslist.html

Using the code here http://jsfiddle.net/Dano007/LJ8rn/ (just for ref, it wont run).

I'm expecting this to return the uploaded badges of the user that is selected in "friendName" variable after the user clicks on the username.

What I'm seeing happen when clicking on the username, is that

  Username.push(object.get("uploadedBy"));  

is returning the username of the name they have just clicked and not the actual user name of the person that uploaded the badge.

Therefore I'm concluding that somewhere in my JQuery/JavaScript code I'm some how selecting the wrong element. I presume this must be to do with the FriendName variable? but I can't solve it and its driving me crazy

In the screen shot you can see that its a3aePaphBF that should be returned in

<div id="FriendsStuffName"></div>

not 'A', 'dan' or 'rob'

$(document).ready(function() {  
  $(document).on('click','.username', function (event) {
    event.preventDefault();
    friendName = $(this).text();
    console.log(friendName);
    friendFeed();
  });
});

/////////////////

var currentUser = Parse.User.current();
var myBadges = Parse.Object.extend("myBadges");


// Captures the input from the user and checks if the name already exists within the Db.
function friendFeed() {
  var friendName = $('#friendsearch').val();
  //console.log(friendName);
  var query = new Parse.Query(myBadges);

  new Parse.Query("myBadges").matchesQuery("uploadedBy", new Parse.Query("_User").equalTo("username", friendName));

  query.find({
    success: function (rules) {
               imageURLs = [];
               for (var i = 0; i < rules.length; i++) { 
                 var object = rules[i];
                 imageURLs.push(object.get("BadgeName"));
                 Username.push(object.get("uploadedBy"));
               }

               for(var j = 0; j < imageURLs.length; j++) {  
                 $('#FriendsStuff').append("<img class='images' src='" + imageURLs[j] + "'/>");
                 $('#FriendsStuffName').append("<div class='username'>'"+Username[j]+"'</div>");
               }
             },
    error: function(error) {
             //If the query is unsuccessful, report any errors
             alert("Error: " + error.code + " " + error.message);
            }
  });
}
</script>


<div id="imgs"></div>
<div id="username"></div>
<div id="container"></div>
<div id="FriendsStuff"></div>
<div id="FriendsStuffName"></div>
</body>
</html>

and here are my users

Answer 1

This does not make sense:

var query = new Parse.Query(myBadges);

new Parse.Query("myBadges").matchesQuery("uploadedBy", new Parse.Query("_User").equalTo("username", friendName));

First you are creating a query for "myBadges", assigning it to the variable "query". Then you are creating another query, also for "myBadges". This new query is not assigned anywhere.

The query that you are running the "find" operation on is the one that you have assigned to the query variable.

If you are expecting the second line, to have any influence on the first, then that is likely the source of your error.

Try this:

var query = new Parse.Query(myBadges);
query.matchesQuery("uploadedBy", new Parse.Query("_User").equalTo("username", friendName));
query.find({
    success: function (rules) {