Build query string from parameters object

Question

How to build a url with query parameters in Angularjs.

the problem is $location(url) is to redirect to the url. In my case, I want to pass a url and key:value pairs for the query params and build the url. something like

url: /a/b/c params: {field1: value1, field2: value2}

result: /a/b/c?field1=value1&field2=value2

I like to use this url for links. I have also seen angular encode ? , & characters. Can I avoid this?

Edit:

My intention was to use the url as href for anchor elements. I do use $http to send the request, but sometimes I need to provide a link, with query params (based on the current object)

Thanks

Following covers the issue with general JS (no Angular) http://stackoverflow.com/questions/111529/create-query-parameters-in-javascript — v-tec, Feb 04 '14 at 08:50
so hard for me to believe external libraries are still required.. There's a whole DOM API in JavaScript, but nothing for this.. amazing! [Javascript is crazy!](http://www.mograblog.com/2014/10/json-parse-is-insane.html) — guy mograbi, Jan 03 '15 at 08:20

score 125 · Accepted Answer · answered Dec 02 '15 at 09:38

There is a nice solution as of 1.4+. You can build a query string from a parameters object with $httpParamSerializer :

var qs = $httpParamSerializer(params);

See docs here

Default $http params serializer that converts objects to strings according to the following rules:

{'foo': 'bar'} results in foo=bar
{'foo': Date.now()} results in foo=2015-04-01T09%3A50%3A49.262Z (toISOString() and encoded representation of a Date object)
{'foo': ['bar', 'baz']} results in foo=bar&foo=baz (repeated key for each array element)
{'foo': {'bar':'baz'}} results in foo=%7B%22bar%22%3A%22baz%22%7D" (stringified and encoded representation of an object)
Note that serializer will sort the request parameters alphabetically.

so useful when testing with `$httpBackend.expectGET()` with complicated query params — Guillaume, Apr 18 '16 at 07:25

score 14 · Answer 2 · edited Mar 18 '14 at 17:07

14

Angular uses the buildUrl() function internally to make a query string from an object of parameters. For now it's impossible to use it in your code because it's private to $HttpProvider unless you want to do some eval() magic.

Related issues on github:

edited Mar 18 '14 at 17:07

Blowsie

40,239
15
88
108

answered Feb 10 '14 at 10:57

shock_one

5,845
3
28
39

score 3 · Answer 3 · edited May 23 '17 at 10:31

3

Believe you really are sort of barking up the wrong tree... you need to take a look at $http service which gives you $http.get(url, config) or $http.post(url, data, config). For a GET request with parameters see the following SO

$http get parameters does not work

For information about $http and how it works see the Angular docs.

http://docs.angularjs.org/api/ng.$http

Perhaps I'm misunderstanding the goal though and you actually want to navigate to a different place, what I suggest here is just to make the request in the background (AJAX style).

http://jsfiddle.net/4ZcUW/

The JS

angular.module("myApp", []).controller("MyCtrl", ["$scope", "$window", function($scope, $window) {
    $scope.goPlaces = function(url, parameter) {
        $window.open("http://www."+url+"?q="+parameter);
        //$window.open("http://www."+url+"?q="+parameter, "_self");
        //$window.open("http://www."+url+"?q="+parameter, "_top");
    };
}])

The HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <a href="#" ng-click="goPlaces('google.com','Shaun Husain')">Find me</a>
</div>

Does this work for your case?

edited May 23 '17 at 10:31

Community

1
1

answered Sep 06 '13 at 20:20

shaunhusain

19,630
4
38
51

2

My intention was to use the `url` as href for anchor elements. I do use $http to send the request, but sometimes I need to provide a link, with query params (based on the current object) – bsr Sep 06 '13 at 20:26
@bsr: I don't know angular, but are you sure the encoding is not an artifact of the way you see the resulting URL as part of the HTML tree (where e.g. ampersands need to be encoded to avoid being mistaken as an initial character of an entity)? – liori Sep 06 '13 at 20:33
Hmm in that case perhaps you want to use $window to use the open function provided by the browser instead of going through Angular's $location since that has to do with routing rather than just navigating (being named location you'd think it could navigate but I'm not so sure) http://docs.angularjs.org/api/ng.$window not sure I'll toy with this in a fiddle if I see no answer I'll post it. – shaunhusain Sep 06 '13 at 20:41
@liori you are right. the encoded url only shows up if you follow the link (if the redirect is not through $location.search(), but a manually constructed href string). This also relevant. http://stackoverflow.com/questions/15197837/how-to-pass-question-mark-in-url-javascript – bsr Sep 06 '13 at 20:44

score 0 · Answer 4 · answered Sep 06 '13 at 20:27

angular's internal and external URL formatting rules are slightly different.

The $location is a means of activating internal routes within your own application.

If it is an external link then $http is what you want.

If it is an internal link, then check it might be worth checking the hash/bang syntax.

Build query string from parameters object

Edit:

4 Answers4

Linked

Related