When working on a REST API call, I needed to create some URL parameters using Angularjs 1.4.2. To achieve this, I utilized a form to pass the parameters to a service function which handles building the parameters and making the $http.post call to the API. For the parameter construction part, I put together a plunker.
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b9b6bfadb4b9aaf6b2ab98e9f6ecf6ea">[email protected]</a>" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
testData is: {{testData}}<p></p>
The data is: {{data}}
</div>
</body>
</html>
script.js
// Code goes here
var app = angular.module("app", []);
app.controller('mainCtrl', function($scope, $httpParamSerializerJQLike) {
//Create JavaScript object.
var testData = {};
//Load the object with the same data as data.
testData = loadTestData(testData);
console.log("testData is: " + JSON.stringify(testData));
//testData is: {"username":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef4fff3fbeddef9f3fff7f2b0fdf1f3">[email protected]</a>","password":"myPassword","grant_type":"password","env":"dev"}
//Use stringify to make it into a JSON string.
$scope.testData = $httpParamSerializerJQLike(JSON.stringify(testData));
//Decoded testData
//={"username":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6dcd7dbd3c5f6d1dbd7dfda98d5d9db">[email protected]</a>","password":"myPassword","grant_type":"password","env":"dev"}
$scope.data = $httpParamSerializerJQLike({
"username":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395358545c4a795e54585055175a5654">[email protected]</a>",
"password":"myPassword",
"grant_type":"password",
"env": "dev"
});
function loadTestData(testData){
testData.username = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad0dbd7dfc9faddd7dbd3d694d9d5d7">[email protected]</a>";
testData.password = "myPassword";
testData.grant_type = "password";
testData.env = "dev";
return testData;
}
});
By putting hardcoded data into a variable named data, I was able to use $httpParamSerializerJQLike to serialize the data successfully. However, when attempting to do the same with a JavaScript object called testData for the parameters, things didn't go as planned - resulting in HTTP 401 errors.
To further investigate, I created a plunker. In the plunker, there were significant differences between the hardcoded data (data) and the testData:
The data is: env=dev&grant_type=password&password=myPassword&[email protected]
Here is what the testData ends up like: testData is: =%7B%22username%22:%[email protected]%22,%22password%22:%22myPassword%22,%22grant_type%22:%22password%22,%22env%22:%22dev%22%7D
It was clear that the decoded testData wasn't suitable for a URL string:
="username":"[email protected]","password":"myPassword","grant_type":"password","env":"dev"}
This led me to wonder why this discrepancy existed and whether manually creating a function to generate the URL string would be necessary, or if there's an alternative solution available.