Angular, encode and decode object from url

Question

I have an object I'm trying to pass by url - something like

$location.search(myObject) 

However when this object becomes an array of objects I have a problem getting it there. I'm wondering how I can put up a large object (right now it's an array of objects, I don't know if that needs to change), and then pull it back down into a controller with an

 $location.search()

This works fine if my object is just 1 small object, right now its an array of objects with levels inside like so

 var testIt = [{
                    "module1" : 
                    [
                        { 
                            "name1"  : ["option1", "option2", "option3"]
                        },
                        { 
                            "name2"  : ["option1", "option2", "option3"]
                        }
                    ]
                },
                {
                    "module2" : 
                    [
                        { 
                            "name3"  : ["option1", "option2", "option3"]
                        },
                        { 
                            "name4"  : ["option1", "option2", "option3"]
                        }
                    ]
                }];

            $location.search(testIt);

How can I work with something like this, (it's ok if the url is huge right now, but if there is a way to shrink it - even better!)

Thanks!

Answer 1

I would make a service to encode/decode an object into a URL encoded JSON string:

angular.module('app', [])
.factory('StateString', function() {
  return {
    encode: function(data) {
      return encodeURIComponent(JSON.stringify(data));
    },
    decode: function(searchString) {
      return JSON.parse(decodeURIComponent(searchString));
    }
  };
});

Then you can put that JSON string on a query parameter on the URL like so (be sure to inject the StateString service we just defined:

var data = [
  {
    module1: {
      name1: ["option1", "option2"]
    }
  }, {
    module2: {
      name2: ["option2", "option2"]
    }
  }
];

$location.search({
  state: StateString.encode(data)
});

And fetch it back like so:

var state = StateString.decode($location.search().state);

Your URL will be pretty long, the example I have given produces a query string of:

"%5B%7B%22module1%22%3A%7B%22name1%22%3A%5B%22optio…22%3A%5B%22option2%22%2C%22option2%22%5D%7D%7D%5D"

I'm sure someone has some bright ideas on how you can compress it...

EDIT

If you wanted, you could include the $location.search() parts into your service:

angular.module('app', [])
.factory('LocationSearchState', function() {
  return {

    set: function(data) {
      $location.search(
        { state: encodeURIComponent(JSON.stringify(data)) }
      );
    },

    get: function(searchString) {
      return JSON.parse(
        decodeURIComponent($location.search().state)
      );
    }

  };
});

So in your controller (or wherever), you could just use:

var state = [{ ... }];
LocationSearchState.set(state);

and

var state = LocationSearchState.get();