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!

have a look: http://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs — mico, Mar 05 '15 at 17:21
Is there a particular reason you have to use GET params and not POST data for this? — Ed_, Mar 05 '15 at 17:25
@EdHinchliffe trying not to refresh the page, just change the url — ajmajmajma, Mar 05 '15 at 18:24
@ajmajmajma have you considered making the data available on a service to make it accessible to different parts of the application rather than trying to pass it through the URL? — Ed_, Mar 05 '15 at 18:25
@EdHinchliffe absolutely, however the goal is to be able to save and share a url that would share a state — ajmajmajma, Mar 05 '15 at 18:32
@ajmajmajma ok - fair enough. There are some places you absolutely have to do this, but my preference is against this method - you could save state on the server. I will test a couple of things in a plunker and try to help.. — Ed_, Mar 05 '15 at 18:34

Ed_ · Accepted Answer · 2015-03-05T19:02:52.590

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();

Just thought - there's nothing to stop you putting the `$location` part of this in the service as well... that would probably end up being neater. — Ed_, Mar 05 '15 at 18:56
Sorry what do you mean by the last comment? This is awesome! — ajmajmajma, Mar 05 '15 at 18:57

Angular, encode and decode object from url

1 Answers1