Pass object as query string parameter

Question

I'd like to pass a search query string to a state. The URL should look like this:

/goods?filters[paramA]=1&filters[paramB]=2

My state setup is the following:

.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 properly and I get:

/goods?filters=[object Object]

How do I do it properly?

So far I've solved the problem with the ugly JSON-as-a-parameter. It's not nice, but at least readable and can be easily manipulated. — CamaroSS
– CamaroSS, Commented Sep 30, 2014 at 6:27

Jared Reeves · Accepted Answer · 2014-10-01 04:28:16Z

1

In order to accomplish what you are wanting you need to be using $stateParams rather then the query string you are trying to use. (although it is possible to use query strings, it is easier to use the $stateParams)

First you need to assign/registered the params with the state:

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

Then you can construct a $stateParams object and pass it in the link to desired state.

If you do need to use the query string, then you need to flatten the object being added to the string

You could either use $.param (jQuery):

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

or write you own vanilla JS 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 issue further I believe that the issue is that you have an object wrapper around your params. When you use this:

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

I think that by doing this the ui-sref does not know how to handle an object(filter) with a sub object. what you need to be doing is passing in a single object I think if you can change your code to only pass in the params as an object your code will work.

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

edited Oct 1, 2014 at 4:28

answered Sep 29, 2014 at 14:26

Jared Reeves

1,3902 gold badges15 silver badges29 bronze badges

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

3 Comments

CamaroSS Over a year ago

I need a query string because it is a search form with many parameters. I am aware of $.param(), but I also can't find a way to pass the query string via ui-sref. the problem can be solved by serializing search parameters array and passing it as a single parameter, though I am looking for a cleaner way.

Jared Reeves Over a year ago

What happens if you remove the filters from the ui-sref like this: ui-sref="goods({ paramA: 1, paramB: 2})"

CamaroSS Over a year ago

It leaves no query string at all.

Collectives™ on Stack Overflow

Pass object as query string parameter

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related