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!

Is there a particular reason you have to use GET params and not POST data for this? — Ed_
– Ed_, Commented Mar 5, 2015 at 17:25
@EdHinchliffe trying not to refresh the page, just change the url — ajmajmajma
– ajmajmajma, Commented Mar 5, 2015 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_
– Ed_, Commented Mar 5, 2015 at 18:25
@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_
– Ed_, Commented Mar 5, 2015 at 18:34

Ed_ · Accepted Answer · 2015-03-05 19:02:52Z

7

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

edited Mar 5, 2015 at 19:02

answered Mar 5, 2015 at 18:49

Ed_

19.2k8 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ed_ Over a year ago

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.

ajmajmajma Over a year ago

Sorry what do you mean by the last comment? This is awesome!

ajmajmajma Over a year ago

Really appreciate you taking the time to help! Thank you!!

Collectives™ on Stack Overflow

Angular, encode and decode object from url

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related