Sending parameters with HTTP GET requests in AngularJS

Question

Sending parameters with HTTP GET requests in AngularJS

Currently, I am attempting to pass parameters using the GET method in AngularJS.

$scope.callMethod  = function(url , paramName1, paramName2 ,paramValue1 , paramValue2)
      {

     $http.get('rest/'+url+'?cd='+ (new Date()).getTime(),{params:{paramName1:paramValue1 ,paramName2:paramValue2}}).success(function(data)
                    {
                        console.log("in success block");   
                    }).error(function(data)
                    {
                        console.log("in error block");
                    }
                    );
          }

In this function, I have provided values for all variables, including the paramNames, with the aim of making it reusable. However, when debugging in the browser, I notice that the paramValues are correctly appended but the paramNames are hardcoded. The URL appears as follows:

http://localhost:7001/MyWeb/rest/getProj?cd=1419222398177&paramName1=666560&paramName2=1

I have verified that the URL mapping in my Spring controller is correct. Despite this, I encounter the following error:

 406 (Not Acceptable)

I am wondering if it is not feasible to use keys as variables in a URL. Thank you in advance for any guidance provided.

javascript angularjs url xmlhttprequest httprequest

Answer 1

Answer №1

The reason behind this behavior is that $http interprets the keys of the params object as query string keys. Therefore, when you provide an object literal inline, such as in your case, the string paramName1 is treated as the actual key.

If you wish to make the value of paramName1 the key, you should structure your params object as follows:

var params = {};
params[paramName1] = paramValue1;
params[paramName2] = paramValue2;

After preparing the params object in this manner, you can proceed to call $http:

$http.get('api/' + endpoint + '?timestamp=' + (new Date()).getTime(), {
    params: params
})

Answer 2

The reason behind this behavior is that $http interprets the keys of the params object as query string keys. Therefore, when you provide an object literal inline, such as in your case, the string paramName1 is treated as the actual key.

If you wish to make the value of paramName1 the key, you should structure your params object as follows:

var params = {};
params[paramName1] = paramValue1;
params[paramName2] = paramValue2;

After preparing the params object in this manner, you can proceed to call $http:

$http.get('api/' + endpoint + '?timestamp=' + (new Date()).getTime(), {
    params: params
})

Answer 3

Answer №2

When working with objects, you have the option to use variables as keys. To achieve this, the key variable must be converted into a string before insertion. One way to do this is by following New Dev's suggestion and using brackets to call the .toString method on the variable. Alternatively, you can explicitly utilize JSON.stringify:

var parameters = {};

parameters[JSON.stringify(paramVar1)] = paramVal1;
parameters[JSON.stringify(paramVar2)] = paramVal2;

By employing JSON.stringify, you ensure greater reliability in handling object keys and avoid unexpected results such as [object Object].

Answer 4

When working with objects, you have the option to use variables as keys. To achieve this, the key variable must be converted into a string before insertion. One way to do this is by following New Dev's suggestion and using brackets to call the .toString method on the variable. Alternatively, you can explicitly utilize JSON.stringify:

var parameters = {};

parameters[JSON.stringify(paramVar1)] = paramVal1;
parameters[JSON.stringify(paramVar2)] = paramVal2;

By employing JSON.stringify, you ensure greater reliability in handling object keys and avoid unexpected results such as [object Object].

Sending parameters with HTTP GET requests in AngularJS

Answer №1

Answer №2

Similar questions

Executing a CRM javascript button triggers a request to a JSON URL and extracts a specific value

The search functionality in the bootstrap-select component is failing when the data token includes only numerical values, such as "4730"

Troubleshooting problem with JSON object and HTML paragraph formatting

"Enhancing web interactivity with AJAX requests and dynamic functionality in web

Angular's onreadystatechange event is triggered when the state

How can I utilize determinePreferredLanguage in angular-translate to configure based on user language preference?

When node.js v6.11.2 is installed on Windows 7, it does not include the correct npm version

The initial render in a Kanban board seems to be causing issues with the functionality of react-beautiful-dnd

What is the best way to perform a single asynchronous or promise-based fetch request and utilize the retrieved data across multiple functions?

Bringing in SCSS using Typescript, React, and Webpack

Implementing color with JavaScript by utilizing RGB input boxes

Notification banner for service maintenance messages with dismiss option available in an Angular application

"Learn how to securely redirect to a custom URI scheme with a fail-safe option to display alternative content if not supported

Tools for diagnosing WebGL Three.js issues

Uploading files in AngularJS without the need for external plugins

The underscore convention for defining members in Typescript allows for clear and concise

Ways to restrict input text to a specific set of values

What is the best way to ensure blocking on an AJAX call?

I encountered a console issue that I am struggling with. It is showing the error message "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'"

Handling MethodNotAllowedHttpException in IIS, AngularJS, and Laravel: A Comprehensive Guide