Decode the encoded value directly in view/html - angularjs

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": "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"
}
]
}
}
}

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.