AngularJs and special characters from json webservice

My current project creates a Single Page Application (SPA) using ASP.NET MVC and AngularJs with data from ASP.NET MVC webapi REST webservices. With the buzzwords out of the way, let me describe the issue we had.

Some data from the webservice contains strings with special characters like “COÖRPERATIE” (dutch). After binding the json data with curly braces the webpage would show malformed strings like “COÃ-RPERATIE”.

Image courtesy of Kittikun Atsawintarangkul / FreeDigitalPhotos.net
Image courtesy of Kittikun Atsawintarangkul / FreeDigitalPhotos.net

We started looking for a solution with ngSanitize. Google gave lots of answers, but none helped. We tried filters, no chocolate. HTML escaping. The horror!

Right after the $http.get we added a $log of the string and found that it already was wrong. But Fiddler said it was correct? Seems to be a header you can send in the request: Accept-Charset: UTF-16

We added the extra header to our request and it worked. No more gibberish. The code samples below add the header to requests.

// client script angular
$http.get(url, headers : { 'Accept-Charset' : 'utf-16' })
     .then(function(response) { });
// client csharp code
var client = new System.Net.WebClient();
client.Headers.Add("Accept-Charset", "utf-16");

Since we always want to return UTF16 we made it the default response over UTF8. With the code below the webservice is configured to use the UTF16 encoding for the json formatter.

// add to global.asax or startup.cs
var utf8json = GlobalConfiguration.Configuration.Formatters.JsonFormatter.SupportedEncodings[0];
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SupportedEncodings.Add(utf8json);
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SupportedEncodings.RemoveAt(0);

The webservice can stil return UTF8 but the client must explicitly request it.

About erictummers

My work as a recruited developer changes almost every month. I like challenges and sharing the solutions with others. On my blog I’ll mostly post about my work, but expect an occasional home project, productivity tip and tooling review.
This entry was posted in Development and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s