receive serialized Object as query string parameters in angularjs

Question

I'm sending nested object as Query parameters from AngularJs Controller with the following code:

$scope.redirect = function () {
    const params = $httpParamSerializer({
        initval: {
            user: {
                id: 1,
                name: 'Username',
            }
        }
    })   
    $location.path('/url-to-other-controller').search(params);
})

and I have to receive this query string in my other controller as object, I've tried several ways, ended up using the following code:

let qs = $location.search();
const initval = JSON.parse(qs.initval);
let userId = initval.user.id;

I'm not sure about my method and if there is a cleaner way, as I have to parse the result of first parameter (initval).

The main question here how to properly receive query string, which are originally objects in angularJS? and Is this the right way to send objects as query parameters?

Are you sending the parameters to a controller within the same SPA? If yes, then a using a service and injecting it into both controllers would be much better. — Florian Lim, Mar 01 '19 at 21:51
@FlorianLim Sure, but the requirements indicate to keep values persist even after reloading, so I can't use services and even local storage and many other ways weren't an option. Strict and weird requirements, so I need answer to this specific case. — Basel Issmail, Mar 01 '19 at 21:53
I see. Well, passing complex objects through Url query parameters might cause problems when you don't use url-encode/decode. A simple way around that would be using base64 encoding on the json string. However, that will inrease the size of your query string and depending on the size of your objects you may exceed browser limits even sooner. See [What is the maximum length of a URL in different browsers?](https://stackoverflow.com/a/417184/634872) for details. The question is: How big will your objects be? — Florian Lim, Mar 01 '19 at 22:08
I just read about `$httpParamSerializer` and learned that it takes care of the encoding. However, arrays seem to be treated in a way that makes parsing the query parameters more difficult. If you don't have arrays in your objects and your current method doesn't cause issues then I'm afraid I have no suggestions for improvement. — Florian Lim, Mar 01 '19 at 22:18
@FlorianLim, thanks for your effort. The only alternative I see is to get backend involve so it keep and save data and receive it in my other controller, but unfortunately that's not an option in my case. :( So I stuck with this requirements, and seeking for better implementations. — Basel Issmail, Mar 01 '19 at 22:24

score 0 · Accepted Answer · answered Mar 02 '19 at 13:45

If you are using JSON.parse, you are better off using JSON.stringify:

$scope.redirect = function () {
    const params = {
        initval: JSON.stringify({
            user: {
                id: 1,
                name: 'Username',
            })
        }
    }
    $location.path('/url-to-other-controller').search(params);
})

Then decode:

let qs = $location.search();
const initval = JSON.parse(qs.initval);
let userId = initval.user.id;

The $httpParamSerializer and $httpParamSerializerJQLike services do funky things with arrays that subsequently don't parse well in JavaScript.

The $httpParamSerializer and $httpParamSerializerJQLike services are for communicating with languages and frameworks like PHP and Ruby on Rails.

receive serialized Object as query string parameters in angularjs

1 Answers1