Json stringify then parse from URL

Question

I seem to be having an issue in stringify'ing then pasing from a url object

I simply stringify my object and set the location (with angulars $location) like so

 currentUrl = {"module1" : {"is" : true} }
 $location.search(JSON.stringify(currentUrl));

So this parses to the url just fine, however when I try to grab it from the url i get this back

     console.log($location.search());
      ---
     Object {{"module1":{"is":true}}: true}

How do I parse this back into an object so I can use it? If I do

 JSON.parse($location.search());

I get a syntax error. I maybe because of how search returns the object? I am a bit confused here, could use some help. Thanks!

So I put it in the url with

   $location.search(JSON.stringify(currentUrl));

What are the steps I need to take to get it back into this form :

 {"module1" : {"is" : true} }

Edit -

It just appears it's setting the json object as the key in the location like

 { "mystrigifiedobject": true }

Edit2 :

based off the first edit, I was able to solve it (assming it's set in the locations object key) like so :

  currentUrl = $location.search();
                    currentUrl = JSON.parse(Object.keys(currentUrl));
                    console.log(currentUrl);

This just feels a little weird though, am I doing something wrong here?

@DanielA.White could you get me an example? I'm unsure - it's a little weird but im not using routes for this, the general idea is sending saving an object in the url and being able to access it - does routeparams do that? — ajmajmajma
– ajmajmajma, Commented Mar 9, 2015 at 19:28
When serializing an object to JSON for a url, don't forget to run the result through encodeURIComponent() e.g.: $location.search(encodeURIComponent(JSON.stringify(currentUrl))); — HankScorpio
– HankScorpio, Commented Mar 9, 2015 at 19:31
Also, $location.search() returns an Object, not a JSON string. — HankScorpio
– HankScorpio, Commented Mar 9, 2015 at 19:32

Moshe Shaham · Accepted Answer · 2015-03-09 19:50:46Z

$location.search() returns the parsed search items from the url path as an object. This means this kind of url:

?a=b&c=d

will result in this object:

{ a: 'b', c: 'd' }

When you call this function:

currentUrl = {"module1" : {"is" : true} }
 $location.search(JSON.stringify(currentUrl));

your path will look like this:

?%7B%22module1%22:%7B%22is%22:true%7D%7D

and the parsed object returned from $location.search will look like this:

{{"module1":{"is":true}}: true}

not that this is an object with one entry and the key is your JSON

So what you need to do in order to get your object back is this:

var parsedObject = $location.search();
var yourObject = JSON.parse(Object.keys(parsedObject)[0]);

see this jsfiddle: http://jsfiddle.net/HB7LU/11633/

But please note: you should encode your string when putting it in a url:

$location.search(encodeURIComponent(JSON.stringify(currentUrl)));

Daniel A. White · Accepted Answer · 2015-03-09 19:31:34Z

0

$routeParams provides access to both routing template values and query string values (as a string).

function ctrl($routeParams) {
    var yourValueAsString = $routeParams.yourKey;
}

function ctrl2($location) {
    $location.search('yourKey', JSON.stringify(...));
}

A better alternative would be to switch to using the UI Router which deals with this better.

answered Mar 9, 2015 at 19:31

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

1 Comment

ajmajmajma Over a year ago

I am not using ng-routes for this, the routing is done through something else.

Collectives™ on Stack Overflow

Json stringify then parse from URL

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related