javascript - Why does this query return all query results and not just those matched with users name?

Question

UPDATE - The bounty is to help me resolve this issue and allow the code to filter back query results based on the user input. Full code can be shared if it helps via jfiddle

I can't understand why the script below is returning all results to the user when it should only return the results from the "myBadges" class that have been uploaded by "friendName".

Maybe its something to still do with pointers using the objectId and not the actual name "dave" associated to the?

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

Still stuck on this. Following my orignal question from:
Why does the query not return results after I switch the class it queries?

<script?
$(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>

Answer 1

Your code states:

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

It does not assign the correct object to query.

I believe it should be

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

Update:

Other problems show up here, with the friendName variable.

This is declared inside your friendFeed function:

function friendFeed() {
    var friendName = $('#friendsearch').val();
    ...
}

In this way, it is not accessible outside the function. Plus, you set a value here, but try to overwrite it on your event.

Prefer a parameter:

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

function friendFeed(friendName) {
    //var friendName = $('#friendsearch').val();
    ...
}