How to push dynamic data to JavaScript object?

Question

I am new to the Ionic Framework. I just started building a few functionalities in AngularJS. Here, what I want is to enter the email and booking ID of a user in an HTML page and then redirect it to other pages which displays all email ids and booking id... Here is my code:

Reservation.html:

<form ng-submit = "goBooking(data)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="Enter Your Email Id" ng-model="data.emailId" required>
          </label>
          <label class="item item-input">
            <input type="text" placeholder="Enter Your Booking Id" ng-model="data.bookingID" required>
          </label>
        </div>
        <div class="padding">
          <input type="submit" class="button button-block button-positive" value = "Submit" />
        </div>
      </form>

     </ion-content>
    </ion-view>

Reservation.JS

Controller.js:

.controller('reservationCtrl', function($scope, $state, $stateParams) {

    $scope.toDoListItems = [{
    emailId: 'versha',
    bookingID: '123'
  }, {
    emailId: 'rahul',
    bookingID: '456'
  }];

  $scope.getTotal = function(){
      return $scope.toDoListItems.length;
  }

    $scope.goBooking = function(data){
    $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
    $state.go('myBookingDetails');
    data.emailId = ' '; 
    data.bookingID = ' ';

     };
});

myBookingDeatils.html:

<ion-view view-title="Hotel Reception">

  <ion-content>
    <ion-list>
        <ion-item ng-controller = "reservationCtrl" ng-repeat="item in toDoListItems">
        <p> Welcome {{item.emailId}} !!!! </p>
        ion-item>
      </ion-list>

  </ion-content>
  </ion-pane>

</ion-view>

After running this,

I am getting output as

Welcome, Versha!! Welcome, Rahul!!

I am not getting that email ID and Booking ID. What I am entering on my Reservation.html. I think my input values are not being set in the toDoListItems.

Somewhere, this code is not inserting the values $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});

Please Suggest!! Thanks in Advance!!

Jacob Carter · Accepted Answer · 2015-01-16 17:07:21Z

I am assuming you are using the same controller for each state? When you change states you reload your controller, which resets your $scope.toDoListItems array to it's inital state. You are going to want to save your toDoListItems in a Service. So...

Controller:

.controller('reservationCtrl', function($scope, $state, $stateParams, toDo) {



    $scope.getTotal = function(){
        return toDo.toDoListItems.length;
    }

    $scope.goBooking = function(data){
        toDo.toDoListItems.push({
            emailId:data.emailId,
            bookingID:data.bookingID
        });
        $state.go('myBookingDetails');
        data.emailId = null; 
        data.bookingID = null;

    };
});

Service:

.factory('toDo', [function () {

    var toDoListItems = [{
        emailId: 'versha',
        bookingID: '123'
    }, {
        emailId: 'rahul',
        bookingID: '456'
    }];

    return {
        toDoListItems : toDoListItems
    };

}]);

This will ensure that the data survives the state change, however if you want this data to persist permanently and stay on page reloads etc.. you will need to hook up a database, if you are purely a front end guy I suggest looking at Firebase

Olivercodes · Accepted Answer · 2015-01-20 23:10:57Z

1

A very simple way to accomplish this would be to just use $localstorage.

Something like this:

$scope.goBooking = function(data){
  $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
  $localstorage.setObject('toDoListItems', $scope.toDoListItems);
  $state.go('myBookingDetails');
 };

And then inside of your new view (where the controller and scope are getting refreshed as Jacob pointed out)

$scope.toDoListItems = $localstorage.getObject('toDoListItems');

You'll just need to add the $localstorage service to you services (detailed in link below). For more info on using localstorage with Ionic, visit: http://learn.ionicframework.com/formulas/localstorage/

answered Jan 20, 2015 at 23:10

Olivercodes

1,0486 silver badges17 bronze badges

1 Comment

Olivercodes Over a year ago

Also I'm not sure why, but both of you are calling assignments after $state.go. Those aren't going to do anything.

Collectives™ on Stack Overflow

How to push dynamic data to JavaScript object?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related