angularjsencodeuricomponentdecodeuricomponent

Decode the encoded value directly in view/html


I am submitting a form for job posting and have skills like C# which escape in my rest API. So I encoded the skills and sending to backend.

"skills":encodeURIComponent(skills)

now when I get back the skills I am doing decodeURIComponent for my skills

$scope.skills = decodeURIComponent(skills);

but this wont work with array of datas, when I want to fetch list of jobs , the datas comes in array , my array has almost 15 key values , which will be used in table some way. Writing a new array and pushing each values into array again pushing decoded skills a big process.

Is any solution to directly decoded the value in view , that is html

I tried {{decodeURIComponent(item.skills) }} but no luck.

sample Data ::

{
  "json": {
    "response": {
      "statusmessage": "Success",
      "count": 59,
      "data": [
        {
          "employerId": 2,
          "employerEmail": "sumit@infosoftjoin.in",
          "employerName": "SumitKumar",
          "companyName": "Infosoftjoin%20pvt%20ltd.",
          "jobId": 142,
          "jobTitle": "Test%20case%201",
          "jobDescription": "<p>ahdu%29%28@*%29*W%29%28*%29E%26%3D--%3D</p>",
          "link": "http://www.infosoftjoin.in",
          "numberOfPositions": 5,
          "createdTime": "18-May-2018",
          "lastUpdatedTime": "18-May-2018",
          "consumedCredits": 44,
          "location": {
            "city": "North And Middle Andaman",
            "state": "Andaman and Nicobar Islands",
            "country": "India"
          },
          "skills": [
            "C%23.NET"
          ],
          "approved": 1,
          "status": "Approved"
        },
        {
          "employerId": 2,
          "employerEmail": "sumit@infosoftjoin.in",
          "employerName": "SumitKumar",
          "companyName": "Infosoftjoin%20pvt%20ltd.",
          "jobId": 130,
          "jobTitle": "New%20job",
          "jobDescription": "hryuyurfkituo8",
          "link": "http://www.infosoftjoin.in",
          "numberOfPositions": 5,
          "createdTime": "16-May-2018",
          "lastUpdatedTime": "16-May-2018",
          "consumedCredits": 93,
          "location": {
            "city": "Nicobar",
            "state": "Andaman and Nicobar Islands",
            "country": "India"
          },
          "skills": [
            "APACHE TOMCAT"
          ],
          "approved": 1,
          "status": "Approved"
        }

      ]
    }
  }
}

Solution

  • encodeURIComponent is a JavaScript built-in function, you can not access it directly in your AngularJs template. Convert that into a $scope function then try accessing from AngularJs template.

    I would suggest you to have a filter for the same instead of $scope function.

    Filter:

    app.filter('decodeFilter', function() {
        return function(input) {
            return decodeURIComponent(input);
        };
    });
    

    Template:

    {{item.skills | decodeFilter}}
    

    If still you want that as $scope function then try below code:

    Controller:

    $scope.decodeComponent=function(value){
        return decodeURIComponent(value);
    }
    

    Template:

    {{decodeComponent(item.skills)}}
    

    Also, please check this plunker for sample scenario with the above examples.