Object parameters in URL with angular ui-router

Question

I need to construct a state url based on an object. Basically I want this state:

{
  id: 1,
  f: {
    "5": [
      "1",
      "7"
    ],
    "7": [
      "3",
      "6"
    ]
  }
}

To be transformed into this url:

http://localhost/resource/1?f[5][]=1&f[5][]=7&f[7][]=3&f[7][]=6

How do I specify such a url pattern with the ui-router config and how do I transition to that state?

Edit: I wasn't really clear on how or why I wanted this.

The main idea is to create a filter for some data on a page. I'd like the users to be able to bookmark the page with their filters applied.

The specific format of the url is nothing I invented, it's the standard way to provide arrays in query parameters for PHP. PHP parses the query with parse_str(), like this:

php > parse_str('f[5][]=1&f[5][]=7&f[7][]=3&f[7][]=6', $arr);
php > var_dump($arr);
array(1) {
  ["f"]=>
  array(2) {
    [5]=>
    array(2) {
      [0]=>
      string(1) "1"
      [1]=>
      string(1) "7"
    }
    [7]=>
    array(2) {
      [0]=>
      string(1) "3"
      [1]=>
      string(1) "6"
    }
  }
}

What I want to do is to call $state.go() with my filter parameters (something like the state object above) and make ui-router change the url and state to those parameters on this specific url format.

I'm open to suggestions if there is a better way to do this.

I actually didn't get this use case but first i'm curious about why you need this url. — Okazari
– Okazari, Commented Jun 9, 2015 at 10:21
I guess you're trying to pass some 2D array kinda parameters. And seems like query string parameters aren't the best way to do so. Why not store this stuff in some service, and access them in the target controller .. — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Jun 9, 2015 at 10:27
I need to pass these query parameters to my backend, so this is actually the url I'm using to fetch json/html from my server. I'd like to enable users to bookmark the page. The specific format is needed because it's the way PHP interprets array parameters in queries. I guess I could create my own format and parse that on the server, but that seems cumbersome if I can get an answer to this question. — Lars Nyström
– Lars Nyström, Commented Jun 9, 2015 at 10:57

Chris T · Accepted Answer · 2015-06-10 12:59:09Z

5

Use the "json" param type which encodes objects as json, or make a custom param type which encodes the way you describe.

.state("foo", { url: "/foo?{queryParam:json}" });

Or

var customType = {
  encode: encodeFn,
  decode: decodeFn
}
    $urlMatcherFactoryProvider.type("phpQuery", customType);

    .state("foo", { url: "/foo?{queryParam:phpQuery}" });

answered Jun 10, 2015 at 12:59

Chris T

8,2262 gold badges32 silver badges39 bronze badges

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

2 Comments

Lars Nyström Over a year ago

This seems like what I want to do. I have to prioritize some other things, but then I'll get back to this answer and try it out. Thank you!

Lars Nyström Over a year ago

Sadly the parameter type provider doesn't seem to work for me, since it can only manipulate the value of the parameter and I also need to manipulate the key. I'll use json instead, since that's simple enough.

Tarun Dugar · Accepted Answer · 2015-06-09 10:55:39Z

1

I am not sure why you would want your data to be sent along with url (you should use a service instead). But here's how you send parameters with the url to switch to different state. The 'parameter' below is the object you need to send:

In your controller which holds the object:

$scope.parameter = {//whatever object you want
};

In your routes:

app.config(function config($stateProvider) {
    $stateProvider.state("example",{
        url: "fooURL/bar=:parameter",
        controller: "FooCtrl as foo",
        templateUrl: "templates/foo.html"
    })
})

In your HTML from which you want to redirect:

<div ui-sref="example({bar: parameter})">

The controller which handles the new redirected state:

app.controller('FooCtrl', ['$scope', '$stateParams', function($scope, $stateParams) {
    $scope.bar = $stateParams.bar;
}])

I am sure you can tweak the code to your requirements.

answered Jun 9, 2015 at 10:55

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

3 Comments

Lars Nyström Over a year ago

I'm sorry I was unclear, I updated the question to clarify why I want to do this. Can you provide an example with $state.go()?

Tarun Dugar Over a year ago

sorry haven't used $state.go()

AlxVallejo Over a year ago

"I am not sure why you would want your data to be sent along with url ". One word. "Share-ability"

Collectives™ on Stack Overflow

Object parameters in URL with angular ui-router

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related