Angular.js: $http get array params are sent incorrectly

Created on 3 Jul 2013  Â·  12Comments  Â·  Source: angular/angular.js

If I make a request with:

params = {
  actors: ['Elvis', 'Jane', 'Frances']
}

The query string _should_ be:

?actors[]=Elvis&actors[]=Jane&actors[]=Frances

Instead, its being set as:

?actors=Elvis&actors=Jane&actors=Frances

Turns out: Hashes aren't sent correctly either #2091

Most helpful comment

@benschwarz - Hi Ben. Thanks for submitting this issue.

There is no particular standard for how arrays should be serialized into query strings. Different back ends expect different formats. This current method (in 1.1.x) was chosen specifically because it allows the developer the most flexibility. See the PR for this: https://github.com/angular/angular.js/pull/2522

You can get your desired serialization by giving setting params to:

params = {
  "actors[]": ['Elvis', 'Jane', Frances']
};

In the long term we are looking to make the serialization of URL queries pluggable so that you will be able to specify your own strategy.

All 12 comments

I can confirm the issue. In AngularJS 1.0.6 the query string would have been: ?actors=Elvis,Jane,Frances.

jQuery has managed HTTP beautifully since I can remember, perhaps we should take a peek into the test suite there before we discover any more surprises.

Otherwise, I'm happy to make patch, just need to know what to do — @IgorMinar @mhevery @vojtajina ?

@benschwarz - Hi Ben. Thanks for submitting this issue.

There is no particular standard for how arrays should be serialized into query strings. Different back ends expect different formats. This current method (in 1.1.x) was chosen specifically because it allows the developer the most flexibility. See the PR for this: https://github.com/angular/angular.js/pull/2522

You can get your desired serialization by giving setting params to:

params = {
  "actors[]": ['Elvis', 'Jane', Frances']
};

In the long term we are looking to make the serialization of URL queries pluggable so that you will be able to specify your own strategy.

@petebacondarwin ok… I thought that arrays were actors[]=value, myself… but I didn't realise that there are other common implementations.

Perhaps its worth adding to the docs how the params work for GET requests, and how one can achieve the desired result?

@benschwarz - the latest version of the docs is a bit more clear.
http://ci.angularjs.org/view/AngularJS/job/angular.js-angular-master/lastSuccessfulBuild/artifact/build/docs/index.html#!/api/ng.$location
But I agree an example would be best.

@petebacondarwin sounds like there is nothing to fix here. Thanks for the input.
How can we make sure that it makes it to the documentation?

So the common workaround of appending"[]" to the array-type variable name doesn't work. I am using Angular 1.5.7, and when I give the following parameters:

params: {
    environment: 'Dungeon',
    level: 1,
    'filters[]': ['Dragon', 'Ooze']
};

I get the following url:

http://localhost:49200/Encounter/Validate?environment=Dungeon&filters%5B%5D=Dragon&filters%5B%5D=Ooze&level=1

It is so close to right - but Angular serializes the [], so the url is wrong.

This is a 3-year old issue, so things have evolved since then :smile:
See #14933.

@petebacondarwin thx, this resolved my problem, cheers

what if I have to send array of objects?

@yasir-rafiq - query params must be string based. If you want to send an array of objects then you will need to serialize the objects to strings first.

thnks @petebacondarwin

Was this page helpful?
0 / 5 - 0 ratings