Parse query working, but results showing as undefined or not found

Question

The below code successfully runs a query and returns the results. However when being displayed on the page, the label for

item.username and item.imageURL

are returning as undefined or in the images case "not found).

I believe I may have to change the code which is displaying this on the page, because a recent query change is now returning multiple possibilities for username:

Before it just returned fromUser for this, now the query also can potentially return toUser. However the resulsts on the page should only show one or the other, not both.

Just stuck on what I need to adjust below to allow this?

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

var queryOne = new Parse.Query(FriendRequest);
queryOne.include('fromUser');
queryOne.include("myBadge");
queryOne.equalTo("fromUser", currentUser);

var queryTwo = new Parse.Query(FriendRequest);
queryTwo.include('toUser');
queryTwo.include("myBadge");
queryTwo.equalTo("toUser", currentUser);

var mainQuery = Parse.Query.or(queryOne, queryTwo);
mainQuery.equalTo("status", "Connected");
mainQuery.find({
    success: function(results) {
        var friends = [];
        for (var i = 0; i < results.length; i++) {
            friends.push({
                imageURL: results[i].get('fromUser').get('pic'),
                username: results[i].get('fromUser').get('username'),
                userId: results[i].get('fromUser').id,
                status: results[i].get('status'),

                // Saves the object so that it can be used below to change the status//
               fetchedObject: results[i]
            });   
        }
        var select = document.getElementById("FriendsConnected");
        $.each(friends, function(i, v) {
            var opt = v.username;
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            select.appendChild(el);
        })


        $('#containerFriends').empty();
        $('#containerFriendsConnected').empty();

        _.each(friends, function(item) {
            var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
            wrapper.append('<img class="responsive-image friendImgOutline" src="' + item.imageURL + '" />'+ '<br>');
            wrapper.append('<div class="tag">' + item.username + '</div>');
            wrapper.append('<div type="button" class="btn btn-danger mrs decline">' + 'Unfriend' + '</div>');

            $('#containerFriends').append(wrapper);
            //The following lets the user accept or decline a friend request by changing the status the status from Pending to Declined/////
            $(document).on('click', function() {
                $(".decline").click(function() {
                    item.fetchedObject.set("status", "Rejected");
                    item.fetchedObject.save(null, {
                        success: function(results) {
                            console.log("REJECTED");
                        },
                        error: function(contact, error) {
                            // The save failed.
                            // error is a Parse.Error with an error code and description.
                            alert("Error: " + error.code + " " + error.message);
                        }
                    });
                });
            });
        });
    },
    error: function(error) {
        alert("Error: " + error.code + " " + error.message);
    }
});

Answer 1

The mainQuery needs to include the keys as well.

var mainQuery = Parse.Query.or(queryOne, queryTwo); 
mainQuery.include("toUser");   //Add this line
mainQuery.include("fromUser"); //Add this line
mainQuery.equalTo("status", "Connected");