How to pass data from search page to hotel result display page

Question

I have encounterd a problem while transferring datas from Search page to result display page: I am trying to develop a webapp to book hotel.It consits of two page hotel search and hotel result,After the user searches the hotel in seach page the result has to be displayed in hotel result page.

Hotel search:

  <form >
                        <input type="text" ng-model="Cityin" required="required" placeholder="Where do you want to go?" class="input-large">
                        <input type="date" ng-model="CheckIn"  required="required" placeholder="Check In">
                        <input type="date" ng-model="CheckOut" required="required" placeholder="Check Out" >
                        <div class="selector">
                            <select class="guests-input">
                                <option value="1">1 Guests</option>
                                <option value="2">2 Guests</option>
                                <option value="3">3 Guests</option>
                                <option value="4">4 Guests</option>
                                <option value="5">5+ Guests</option>
                            </select>
                            <span class="custom-select">Guests</span>
                        </div>
                        <input type="submit" ng-click="GetHotel();" value="Search">
                    </form>

Controller js:

 $scope.GetHotel= function () {  
        alert("in");
        var date = new Date($scope.CheckIn);
        var mnth = ("0" + (date.getMonth() + 1)).slice(-2);
        var day = ("0" + date.getDate()).slice(-2);
        var CheckIn = [date.getFullYear(), mnth, day].join("-");
        var datej = new Date($scope.CheckOut);
        var mnthk = ("0" + (datej.getMonth() + 1)).slice(-2);
        var dayl = ("0" + datej.getDate()).slice(-2);
        var CheckOut = [datej.getFullYear(), mnthk, dayl].join("-");
        alert(CheckIn);
        alert(CheckOut);
        try {
      
            $http({
                method: 'POST',
                data: { CheckInCity: $scope.Cityin, CheckInDate: CheckIn, CheckOutDate: CheckOut },
                url: '/Admin/FlightDisp',
                timeout: httpTimeout,
            }).then(function successCallback(response) {              
                var json = angular.fromJson(response.data.myJsonResponse);
                if (json != null || json != "") {
                   
                    $window.location.href = '/Admin/HotelResult';
                    var hoteldat = json.data;
                    $scope.HotelDeat = hoteldat;
                  
                }               
            }, function errorCallback(response) {
                alert("error");

            });

        } catch (ex) { alert(ex); }
    }

Hotel Result Page :

<div ng-repeat="hotels in HotelDeat">
                                <div class="list-block main-block room-block">
                                    <div class="list-content">
                                        <div class="main-img list-img room-img">
                                            <a href="#">
                                                <img src="~/Content/Hotel_Result/images/available-room-1.jpg" class="img-responsive" alt="room-img">
                                            </a>
                                            <div class="main-mask" ng-repeat="prices in hotels.offers">
                                                <ul class="list-unstyled list-inline offer-price-1">
                                                    <li class="list-inline-item price">{{prices.price.total}}<span class="divider">|</span><span class="pkg">7 Nights</span></li>
                                                    <li class="list-inline-item rating">
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star lightgrey"></i></span>
                                                    </li>
                                                </ul>
                                            </div><!-- end main-mask -->
                                        </div><!-- end room-img -->

                                        <div class="list-info room-info">
                                            <h3 class="block-title"><a href="#">{{hotels.hotel.name}}</a></h3>
                                            <p class="block-minor">Max Guests:02</p>
                                            <p>{{hotels.hotel.description.text}}</p>
                                            <a href="#" class="btn btn-orange btn-lg">View More</a>
                                        </div>
                                    </div>
                                </div><!-- end room-block -->
                            </div>

Question:The value from var hoteldat = json.data; has to go to hotel result page,but the data doesnt goes to the page after $window.location.href = '/Admin/HotelResult';, I am a begginer ,any help is much appreciated. Thanks in Advance

You can use an angular service object to keep the data. Please take a look in similar answered questions [here](https://stackoverflow.com/questions/35628027/pass-data-from-angular-form-to-another-controller) and [here](https://stackoverflow.com/questions/18142008/pass-data-between-controllers) — lzagkaretos, Sep 26 '20 at 07:31

score 0 · Answer 1 · answered Sep 26 '20 at 08:48

Excellent guide here for sharing data between controllers:

Holding the shared data in a factory or service
Holding the shareddata in the root scope
Using events to notify other controller about changes to the data

You case is most probable 1

Create the factory service (this is singleton which means there is only a single instance

app.factory('Holder', function() {
  return {
    value: 0
  };
});

Inject into both controllers. The first one will set the data, the second one will retrieve.

app.controller('ChildCtrl', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});

app.controller('ChildCtrl2', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});

We are also talking about an SPA. You should not navigate in the SPA with href. You should use the routing mechanism here, otherwise the solution above will fail.

score 0 · Accepted Answer · answered Oct 04 '20 at 07:53

DearAll, Thanks for your answers.I used local storage to pass my value from Search page to the result page: The js function: $scope.GetHotel= function () {

        **window.localStorage.removeItem('data');**
       
        try {

            $http({
                method: 'POST',
                data: { CheckInCity: $scope.Cityin, CheckInDate: CheckIn, CheckOutDate: CheckOut },
                url: '/Admin/FlightDisp',
                timeout: httpTimeout,
            }).then(function successCallback(response) {

            **localStorage.setItem("data", response.data.myJsonResponse);**
               $window.location.href = '/Admin/FlightResult';

            }, function errorCallback(response) {
                alert("error");

            });

And in my HotelDispController I fetched the data using the key value:

app.controller('HotelDispController', ['$scope', '$window', '$rootScope', '$http', '$location', function ($scope, $window, $rootScope, $http, $location) {
   
    **var myData = localStorage.getItem('data');**   
    var json = angular.fromJson(myData);   
    var hoteldat = json.data;  
    $scope.HotelDeat = hoteldat; 
   
}]);
  
            } catch (ex) { alert(ex); }
        }
    }]);

When the GetHotel function begins the datas are deleted so that it avoids producing duplicate datas.

How to pass data from search page to hotel result display page

2 Answers2