Search code examples
javascriptangularjsionic-frameworkbackendless

Use data of 2 arrays in AngularJS ng-repeat


I'm currently working on an Ionic 1 project, making use of the Backendless data storage service. I have a webpage where I need to display details from 2 different tables, which I have gotten from Backendless, into a list. Here's my code:

HTML code:

<ion-view view-title="Your Bookings" ng-controller="GuBookingsCtrl">
<ion-content class="padding">
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
</ion-refresher>
<ul class="list">
    <li ng-repeat="r in res track by $index" r="r" hotel="hotel" class="item item-button-right">
      <h2>{{hotel.name}}</h2>
      <p>{{r.checkin}} to {{r.checkout}}</p>
      <button class="button button-positive" ng-click="cancel()">
        Cancel
      </button>
    </li>
</ul>
</ion-content>
</ion-view>

JS code:

angular.module('GuBookingsCtrl.controllers', [])

.controller('GuBookingsCtrl', function($scope, $state) {
var init = function() {
var user = $state.params.user;
$scope.res = [];
$scope.hotel = [];
var whereClause = "guestID = '" + user.objectId + "'";
var queryBuilder = Backendless.DataQueryBuilder.create().setWhereClause( whereClause );
Backendless.Data.of("Bookings").find( queryBuilder )
  .then(function(foundHotels) {
    $scope.res = foundHotels;
    console.log($scope.res);
    for (var i=0;i<$scope.res.length;i++){
      $scope.hotel[i] = Backendless.Data.of("Hotels").findByIdSync( {objectId: $scope.res[i].hotelID} );
    }
    $scope.$apply();
  })
  .catch(function(error) {
    console.log("error" + error.message);
  })
 }
init();
$scope.doRefresh = function () {
  init();
  $scope.$broadcast ('scroll.refreshComplete');
}

$scope.cancel = function() {
console.log("cancel clicked");
}
})

Solution

  • If you want to use ngRepeat for combination of two arrays use javascript concat() function

    Like that:

    <div ng-repeat="item in array1.concat(array2)">{{item}}</div>
    

    you need more follow this looping multiple arrays simultaneously with ng-repeat