Search code examples
angularjsjsoncoldfusionspecial-charactersurl-encoding

Escape % in JSON Struct with Angularjs for sending http.GET to the server

I have a problem when I tried to execute my query with AngularJS because there is special character like %. I'm using Coldfusion as the server.

The URL of the query is:

http://myApp/index.cfm?method=updateRequest&dateRequest=11/12/2017&requestid=29000&jsStruct={%22ID%22:29000,%22PERSONID%22:13541,%22REQUESTDATE%22:%2211/12/2017%22,%22DESCRIPTION%22:%22test%22,%22MAILCONTENT%22:%22essai%2025%20???%%22,%22OPERATOR%22:%22Sebastien%20AMADEI%22,%22REQUESTTHEME%22:{%22ID%22:2,%22OBSOLETE%22:0,%22NAME%22:%22Economy%20and%20finance%22}}

My Factory:

app.factory('RequestService', function($http){
    var factory={};

    factory.updateRequest=function(objRequest,id, dateFormat){
        return $http.post('http://myApp/requests.cfc?method=updateRequest&dateRequest=' + dateFormat + '&requestid=' + id + '&jsStruct=' + JSON.stringify(objRequest))
    };

    return factory;
})

My controller in the file app.js:

app.controller('ctrlEditRequests', function ($scope, $routeParams, MyTextSearch, RequestService){

    RequestService.loadRequestsById($routeParams.requestId).success(function(request){

    $scope.submitForm = function(request){
        if($scope.RequestForm.$valid){

            RequestService.updateRequest(request, $routeParams.personId, dateFormat).success(function(){
                window.location="#/view-contacts/" + $scope.request.PERSONID;
            }).error(function (data, status, header, config) {

            });

        }
    };      
});

Here the structure is: 

"{"ID":29000,"PERSONID":13541,"REQUESTDATE":"11/12/2017","DESCRIPTION":"test","MAILCONTENT":"essai 25 ??? 1%1","OPERATOR":"Sebastien AMADEI","REQUESTTHEME":{"ID":2,"OBSOLETE":0,"NAME":"Economy and finance"}}"

I cannot execute the query because there is the character % in the field Mail Content. I have done a stringify but it's not sufficient.

I don't know how to escape special characters before sending to the server in order to execute the query.

Could you please help me to solve the problem?

Solution

  • In the example, the "%" character is being properly encoded. It is the "?" character that is improperly encoded.

    In the URL, AngularJS does not percent encode the following characters:

    A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

    To properly percent encode search parameters in a URL, use the params property of the $http config object:

    app.factory('RequestService', function($http){
    var factory={};

    factory.updateRequest=function(objRequest,id, dateFormat){
        var params = {
            method: "updateRequest",
            dateRequest: dateFormat,
            requestid: id,
            jsStruct: objRequest
        };
        var config = { params: params };
        return $http.get("http://myApp/requests.cfc", config)
    };

    return factory;
})

    For more information, see