Build query string from parameters object

Question

How to build a url with query parameters in Angularjs.

I see the API $location.search()

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

Edythedythe

Following covers the issue with general JS (no Angular) #112029 – Carrero

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! – Barrera

Answer 1

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.

Fremantle

so useful when testing with $httpBackend.expectGET() with complicated query params – Glyptodont

Answer 2

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:

• https://github.com/angular/angular.js/pull/3213
• https://github.com/angular/angular.js/pull/2701

Hasen

Answer 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?

Gumm

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) – Edythedythe

@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)? – Rectum

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) 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. – Gumm

@Rectum 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. #15198337 – Edythedythe

Answer 4

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.

Negation