Pass object as query string parameter

I would like to pass a search query string into a state. The url should look like this:



My state setting is as follows:

.state('goods', {
            url:        '/goods?filters',


My link template looks like this:

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>


However ui-router does not encode it correctly and I get:

/goods?filters=[object Object]


How can I do it right?


source to share

1 answer

To accomplish what you want, you need to use $ stateParams , not the query string you are trying to use. (although query strings can be used, it's easier to use $ stateParams)

First you need to assign / register stateful parameters:

.state('someState', {
    url: "/someLinkPath/:Param1",
    templateUrl: 'stateHTML.html',
    controller: function ($stateParams) {


Then you can construct a $ stateParams object and pass it into a reference to the state you want.

If you want a query string you need to flatten the added object into the string

You can use $ .param (jQuery):

var yourParams = $.param({ param1: Value1, param2: Value2 });


or write your own JS Vanilla function like this:

function toQueryString(obj) {
    var parts = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
    return parts.join("&");


Edit: After thinking about your problem, I believe the problem is that you have objects wrapping around your parameters. When you use this:

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>


I think by doing this the ui-sref doesn't know how to handle the object (filter) with the sub-object. what you need to do is pass in one object, i think if you can change your code to only pass parameters as an object, your code will work.

<a ui-sref="goods({ paramA: 1, paramB: 2})">Menu item label</a>




All Articles