Updating UI using data from server, best practices?


#1

My UI is displaying information from the server

$scope.user.cash = 100000
$scope.inventory = {“apple”:1, “orange”:2, “pear”:3}
$scope.price = {“apple”:100, “orange”:200, “pear”:300}

Now let’s say the user makes a purchase and makes a random purchase at a slot machine, server (I am using Parse.com) determine it is banana they bought, and sends back a response of banana along with its cost. This information needs to be updated on the UI without a manual refresh.

Questions:

  1. Should I download the entire inventory list again and refresh the scope? I can even force the server to pass back the entire array of objects but it is kind of expensive since we know the only thing that changed here is banana.

  2. Pass back banana object to $scope, but what if the server passed back orange instead? Do I need to manually loop through user inventory and decide orange already exists and do a quantity + 1 or there are more elegant ways to “refresh” the scope.

  3. On my UI I am trying showing the prices of apple, orange and pear whenever there is a chance on the server without refreshing. How is this usually handled? I guess I can use $interval to query every other second since Parse doesn’t have web socket support . . .