AngularJS Displays HTML Unicode from backend in Ruby on Rails - ruby-on-rails

Question

I am trying to display characters from different languages on my screen. These characters are generated by a csv file which is convert to JSON format as follows
{
"id": 32,
"name": "Hindi",
"csv": [
{
"keycode": "1",
"unicode": "\u0D15",
"chakra": "1"
},
{
"keycode": "1",
"unicode": "\u0D15",
"chakra": "1"
},
{
"keycode": "1",
"unicode": "\u0D15",
"chakra": "1"
}
]
}
I am seeing the html unicodes displayed on the screen though I am using $sce.trustAshtml() for the unicode values via filter. Here is my angularJS code.
controller :
app.controller("KeyboardController", [
"$scope", "Restangular", "LanguageModel", "KeyboardModel", "$sce", function($scope, Restangular, LanguageModel, KeyboardModel, $sce) {
var languageResource;
$scope.languages = LanguageModel.getAll();
languageResource = Restangular.one("languages");
angular.element("#chakra").css("display", "none");
languageResource.getList("all").then(function(languageobject) {
LanguageModel.addAll(languageobject);
KeyboardModel.addlanguage(languageobject);
$scope.onscreen = KeyboardModel.getallkeys();
$scope.firstmaintablekeys = KeyboardModel.maintablelayout1();
});
}
]);
keyboardModel : service.
app.factory("KeyboardModel", function() {
var KeyboardModel;
KeyboardModel = function() {
this.keys = [];
this.key = [];
this.keyid = {};
this.languageobject = {};
};
KeyboardModel.prototype = {
addlanguage: function(languageobject) {
this.languageobject = languageobject;
},
getallkeys: function() {
var currentlanguage, div, grouped, i, mod, totalrows;
currentlanguage = this.languageobject[1];
totalrows = currentlanguage.csv.length;
grouped = [];
i = 0;
while (i < totalrows) {
div = Math.floor(i / 5);
mod = i % 5;
if (mod === 0) {
grouped[div] = [];
}
grouped[div][mod] = currentlanguage.csv[i];
i++;
}
this.keys = grouped;
return grouped;
},
maintablelayout1: function(language) {
var i, table;
i = 0;
table = [];
while (i < 4) {
table[i] = this.keys[i];
i++;
}
return table;
}
};
return new KeyboardModel();
});
HTML :
<div class="maintable1 frame1" ng-show="frame1">
<table>
<thead></thead>
<tbody>
<tr ng-repeat="data in firstmaintablekeys">
<td ng-repeat="row in data" data-keycode="{{ row.keycode }}" data-chakra="{{ row.chakra }}" ng-mousedown="displaychakra(row.keycode, row.unicode, $event)" ng-mouseup="hidechakra()" ng-click="sharetext(row.unicode)">
<span ng-bind-html="row.unicode | unsafeFilter"></span>
</td>
</tr>
</tbody>
</table>
</div>
Filter :
app.filter("unsafeFilter", function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
Am I missing something? Why do I get unicodes displayed instead of their corresponding values?
EDIT : I have been told its a server side issue. Here is my controller which reads the CSV file that contains the Unicodes.
class LanguagesController < ApplicationController
def index
end
def all
availablelanguages = {
:data => []
}
#language = Language.all.each do |eachlanguage|
availablelanguages[:data] << {
:id => eachlanguage.id,
:name => eachlanguage.languagename,
:csv => []
}
CSV.foreach(eachlanguage.path) do |row|
availablelanguages[:data].each do |single|
single[:csv] << {
:keycode => row[0],
:unicode => row[1],
:chakra => row[2]
}
end
end
#data = JSON.pretty_generate(availablelanguages[:data])
end
render json: #data
end
end
Here is the screenshot of the JSON response generated. It adds an additional backlash to make the string literal. http://i.imgur.com/FY0F1l9.png?1

Answer 1

I had to do the same recently. JSON returned unicode (Chinese). Didn't have to do any thing to decode it. Just insert this line in your header area.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>