How to append dynamic query parameter in HTTP get URL in Angular JS?

Question

I am new to angular JS. I have one controller (.js file) in which I wrote a function to make a http get call to back-end. Like below:

             $http({
                 url: "services/rest/1.0/project/employeeDetails",
                 method: 'GET',
                 headers: config,
                 transformResponse: function (data) {
                     var x2js = new X2JS();
                     var json = x2js.xml_str2json(data);
                     return json;
                 }
             }).success(function (response) {
                 alert("success for account details with response:"+response);
                if (response && response.siteDetailsList.errorCode == 0)
                     $scope.accountdetails = response;
             });

Now problem is that I need to add two query parameter to my url which I mentioned in above code snippet , so that final URL will look like this:

services/rest/1.0/project/employeeDetails ? param1=world & param2=hello

This param1 and param2 value I am getting from my HTML file's input text box. Any idea how we append dynamic query parameter to this URL?

i think, majke alone angular , when you put it as params, and define by GET — Álvaro Touzón
– Álvaro Touzón, Commented Feb 16, 2017 at 8:28
Possible duplicate of How to pass parameters to $http in angularjs? — georgeawg
– georgeawg, Commented Feb 16, 2017 at 19:53

Bartek Fryzowicz · Accepted Answer · 2017-02-16 08:41:35Z

1

You can use params config property:

   $http({
         url: "services/rest/1.0/project/employeeDetails",
         method: 'GET',
         headers: config,
         params: {
             param1: someValue,
             param2: anotherValue
         },
         transformResponse: function (data) {
             var x2js = new X2JS();
             var json = x2js.xml_str2json(data);
             return json;
         }
     }).success(function (response) {
         alert("success for account details with response:"+response);
        if (response && response.siteDetailsList.errorCode == 0)
             $scope.accountdetails = response;
     });

answered Feb 16, 2017 at 8:41

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

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

Comments

Fritz · Accepted Answer · 2017-02-16 09:19:19Z

1

You can use the $httpParamSerializer service from AngularJS.

https://docs.angularjs.org/api/ng/service/$httpParamSerializer

Object:

var obj = {
  param1:"world",
  param2:"hello"
}

With the httpParamSerializer:

$httpParamSerializer(obj)

Returns:

param1=test&param2=world

answered Feb 16, 2017 at 9:19

Fritz

1711 silver badge6 bronze badges

Comments

Gautam Nagraj · Accepted Answer · 2017-02-16 09:57:33Z

0

var obj = 
{
  param1:"world",
  param2:"hello"
}

$http.post("services/rest/1.0/project/employeeDetails", obj)
.then(function (response)
{
        return response`enter code here`;
},`function (error)

{ return error; });`

answered Feb 16, 2017 at 9:57

Gautam Nagraj

775 bronze badges

Comments

Teddu · Accepted Answer · 2017-02-17 06:42:19Z

0

I solved the problem. Its very simple. We can modify $url like this way too:

$http({
         url: "services/rest/1.0/project/employeeDetails?param1="+value+"&param2="+value",
         method: 'GET',
         headers: config
         }

By using a separate "param" property is a bit tricky because parameter get sorted alphabetically by default , so we need to write code for preventing sorting if we want parameter to appear in our desired order.

Any lastly, Thanks for your prompt responses. :)

answered Feb 17, 2017 at 6:42

Teddu

2098 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to append dynamic query parameter in HTTP get URL in Angular JS?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related