Displaying data on the page from the data gotten from parse

Question

I have offers table and users table on parse server. I did a query for he offers table and it worked great (both console log and html - I had issues with async and the Q.promise helped). Now I'm trying to add two elements that are in the users table. I get it on the console, but not on the page. Here is what I have on the offers.service:

    this.getAllOffers = function () {

    var Q = $q.defer();
    console.log('getAllOffers called');

    //all offers filter is selected
    this.allOffersFilter = false;

    var offers = Parse.Object.extend("Offer");
    var exchanges = Parse.Object.extend("Exchanges");
    var users = Parse.Object.extend("User");

    var query = new Parse.Query(offers);
    var userQuery = new Parse.Query(users);

    var results = [];

    query.descending("createdAt");
    query.limit(4);

    userQuery.find().then(function(users) {
        for (i = 0; i < users.length; i++) {
            foundUsers = users[i];

            query.find().then( function(offers){
            for(i = 0; i < offers.length; i++){
                found = offers[i];
            var result = {};

            result.date = found.get("createdAt");
            result.price = found.get("price");
            result.status = found.get("accepted");
            result.lastName = foundUsers.get("lastName");
            result.companyName = foundUsers.get("companyName");

            console.log(result.companyName);
            console.log(result.price);
        }
    });
    results.push(result);
  }
  Q.resolve(results);
    });
  return Q.promise;
  };

Then my HTML:

    <!--List of offers-->
    <div class="col-md-3">
        <h4>List of offers</h4>

        <div ng-if="offersList">
            <div ng-repeat="offer in offersList">
                <div class="offer card">
                    <div>{{offer.username}}</div>
                    <div>{{offer.companyName}}</div>
                    <div>{{offer.date}}</div>
                    <div>{{offer.price}}</div>
                    <div>{{offer.status}}</div>
                </div>
            </div>
        </div>
        <div ng-if="!(offersList)">There are no offers</div>
    </div>

Then my component:

angular.module('offersPage')
.component('offersPage', {
    templateUrl: 'pages/offers-page/offers-page.template.html',
    controller: function(AuthService, PageService, OffersService, 
$scope) {
        // Functions for offers-page

        // Check if user is logged in and verified on page load
        AuthService.userLoggedin(function(loggedIn, verified) {
            if(!verified) {
                PageService.redirect('login');
            }
        });

        this.$onInit =  function() {
            OffersService.getAllOffers().then(function(offersList) {

            $scope.offersList = offersList;
            });
      }
    }
});

THANKS IN ADVANCE !

Answer 1

You are resolving $q before results is populated, so, you list is empty.

I don't know about Parse server, but if userQuery.find().then is async, then need to move Q.resolve(results); inside it, or probably inside query.find().then.