Conditional Checking in AngularJs using Restangular

This problem seems specific but its the age old “get details of parent document when you only have the child documents” problem now in the fun world of a client side application.

Problem: A page in an angularJs application contains a list of notes made by an attendee on a number of presentations.

If that presentation has been marked as complete then they you should be able to click on any given note and be taken directly to the slide they made the note on.

If however the presentation has not been made public then it should just be static text, the api call that returns the list of notes does not contain the public/notpublic details, so we have to make another API call to the presentations to find out if their are public.

However we want to keep the number of calls to a minimum and use existing code if suitable.

This project is using Restangular, described as an “AngularJS service to handle Rest API Restful Resources properly and easily”, which as far as I am concerned is both wonderful and bloody woeful. The framework tends to make hard things easy, and easy things hard. In this case I just want the JSON that a GET call returns. To do that, and not get all the extra objects that Restangular adds, you have to alter the root app.js of your app so that you can get an “original” response.

Bung the following code in the function that contains “function (RestangularProvider)” <– I am assuming that you already have Restangular up and working

        // add originalElement to the response so we can
        // have un-restangularized objects as well
        RestangularProvider.setResponseExtractor(function(response) {
          //console.log(response);
          var newResponse = response;
          newResponse.original = angular.copy(response);
          //console.log("response", newResponse.original);
          return newResponse;
        });

Now in the controller of the page you are displaying the notes on you want to add the following to the init ( ensuring that your “.service” contains “ApiRestangular” )

  init: function () {
        ApiRestangular.all('api/events/presentations').getList().then(
           function(successResponse) {
             angular.extend($scope, {
              presentationlist: successResponse.original
             });
           },
           function(errorResponse) {           
           }
        );

This makes a Restangular call to the ‘api/events/presentations’ api and when it gets the result, it fetches the original JSON result and stuff its in the “presentationlist” variable in the $scope
You now have an in memory array you can search to get more info straight from the page e.g

 isPresentationPublic: function (note) {
          if (typeof this.$scope.presentationlist === 'undefined') {
            return false;
          } else {
            for (var i = 0; i <= this.$scope.presentationlist.length; i++) { 
              if (note.idOfPresentation == this.$scope.presentationlist[i].id) {
                return this.$scope.presentationlist[i].ispublic
              }
            }  
          }
      },

(It should be noted that this is pure user interface stuff, and not meant to be secure).