web-dev-qa-db-fra.com

Envoyer un tableau via une requête GET avec le service $ http d'AngularJS

Je dois envoyer une demande GET à l'aide du service $http. L'un des paramètres sera un tableau d'identifiants. L'URL ressemble à celle-ci mysite.com/items?id[]=1&id[►=2&id[3=id===4

J'ai essayé cette approche

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: ids // ids is [1, 2, 3, 4]
  }
)

mais l'URL que j'ai obain est mysite.com/items?id=%5B%221%22%2C%222%22%2C%223%22%2C%224%22%5D

C'est parce que Angular est en train de convertir ma valeur en chaîne JSON. Y at-il un moyen d'obtenir le comportement que je veux?

[Mettre à jour]

J'ai résolu le problème grâce à la suggestion de Jonathan d'utiliser la fonction $.param() de jQuery.

$http(
  method: 'GET'
  url: '/items?' + $.param({id: ids})
)
javascripthttpangularjsangular-http
47
Gpx
$http(
  method: 'GET',
  url: '/items',
  params: {
    id: JSON.stringify(ids) // ids is [1, 2, 3, 4]
  }
)
60
Saad Ahmed

Vous pouvez aussi faire

$http(
  method: 'GET',
  url: '/items',
  params: {
    "id[]": ids // ids is [1, 2, 3, 4]
  }
)

comme mentionné ici . Cela semble plus simple.

75
Ignacio Valdivieso

jQuery est génial, mais si vous ajoutez jQuery juste pour cela, vous pouvez probablement le faire avec une méthode non jQuery et économiser de précieux octets.

Manière non jQuery:  

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: ids.toString() //convert array into comma separated values
  }
)

Sur votre serveur, reconvertissez-le en tableau.

Par exemple. en php

$ids = explode(',',Input::get('ids'));

//now you can loop through the data like you would through a regular array. 

foreach($ids as $id)
{
 //do something
}
10
Varun Nath

Ceci est valide, il suffit de le décoder sur votre backend. Presque toutes les langues principales ont un moyen de décoder une adresse URI. Si vous n'aimez pas la façon dont Angular le sérialise, vous pouvez essayer $ .param () de jquery.

5
Jonathan Rowny

vous pouvez utiliser $ httpParamSerializer ou $ httpParamSerializerJQLike

$http({
  method: 'GET',
  url: '/items',
  data: $httpParamSerializer({'id':[1,2,3,4]}),
})
1
Ben Hsieh

L'option paramSerializer peut être définie pour répliquer la méthode de sérialisation de jQuery :

$http({
  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'
});
1
Lewis

Tant que vous n'avez pas trop d'identifiants, ce qui rendra l'URL de votre demande trop longue en fonction de votre configuration, la solution suivante fonctionnera ...

Service angulaire:

$http.get("website.com/api/items?ids=1&ids=2&ids=3");

Contrôleur WebApi

[HttpGet, Route("api/items")]
public IEnumerable<Item> Get([FromUri] string[] ids)
{
}
0
AntAsc