Decode the encoded value directly in view/html

Question

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": "[email protected]",
          "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": "[email protected]",
          "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"
        }

      ]
    }
  }
}

Answer 1

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.