Nested Queries returning UNDEFINED using javascript and parse.com database

Question

I have two classes within my parse database one called "TrebUser" and the other called "UserImage" described as follows:

TrebUser
----------------------------------------------------
| objectID | firstname | lastname | image |

(string) (string) (string) (UserImage ObjectId)

UserImage
------------------------------------
| objectID | image | imagename |
(string) (file) (string)

For a given TrebUser I want to display a profile which includes their firstname, lastname, and shows the imagename (once I manage to get the image name displayed i will attempt to actually display the image). I am attempting to use one query to retrieve the TrebUser, and then a second nested query, or promise (as i have used below), to retrieve the imagename for that user, and then return that imagename back to where I will print it on the screen. For some reason it always comes back as undefined even though when I use a popup alert it is showing the name just fine. I think this has something to do with asynchronous execution. Any thoughts?

function getPhoto(i){

    var TrebUser = Parse.Object.extend("TrebUser");
    var queryTrebUser = new Parse.Query(TrebUser);

    var UserImage = Parse.Object.extend("UserImage");
    var queryUserImage = new Parse.Query(UserImage);


    queryTrebUser.find().then(function(results) {
        alert("Successfully retrieved " + results.length + "object");

        var object = results[i];
        var imageId = object.get('image').id;

        queryUserImage.equalTo("objectId", imageId);

        return queryUserImage.find();

    }).then(function(imageResults) {

        var object2 = imageResults[i];

        //this alert shows the image 'name' perfectly, however when i return the object2.get('name') it shows
        //up as undefined!
        alert("Successfully retrieved " + imageResults.length + " object with name " + object2.get('name'));
        return object2.get('name');

    }, function(error) {

        alert("Error: " + error.code + " " + error.message);

    });
}

Answer 1

You should instead just use the .include(key) method, e.g.

var TrebUser = Parse.Object.extend("TrebUser");
var queryTrebUser = new Parse.Query(TrebUser);

queryTrebUser.include("image");

queryTrebUser.find().then(function(results) {
    alert("Successfully retrieved " + results.length + "object");

    var object = results[i];
    var image = object.get('image');
    var imageName = image.get('name');
});

I would highly question a few things you're doing based on the code you have provided. Perhaps I should explain what your current code will do (order will vary depending on network speed):

• call getPhoto(3)
• construct async query to get all users (limited to top 100 by default) with success handler, i (3) passed to inner scope
• return undefined (no return statement in scope)
• ... (when async method returns with data seconds later) ...
• get the 4th item from the results (0-based array)
• extract the image ID
• construct a query using find() NOTE: should just use get(id) if you know the id
• pass the query as a promise to the next then() handler
• ... (when next async method returns with data seconds later) ...
• try to get the 4th items from an array that should only have one item in it
• try to get properties of something that from my understanding should be null/undefined
• return a string property from a promise, breaking things horribly