urldecode with knockout binding, breaks at unprintable characters like ÁŚℐŦ Á

Question

I have a json dataset coming from an ajax call, which i have bound to a div using foreach. This is a sample dataset

[{"contact":"123054","type":"4","value":"vikasverma21%40gmail.com;","id":"123054","userid":"snstestbuild003@gmail.com","last_update":"1389607937995","status":"N","photo_type":null,"importance":null,"sensitivity":null,"subject":null,"folder":null,"anniversary":null,"first_name":"%5C%2F%21k%40%24+.","middle_name":"","last_name":"","display_name":null,"birthday":"1900-01-01","body":";","categories":"","children":null,"hobbies":null,"initials":null,"languages":null,"nickname":null,"spouse":null,"suffix":"","title":"","gender":null,"assistant":null,"company":"","department":"","job_title":";","manager":null,"mileage":null,"office_location":null,"profession":null,"companies":null},{"contact":"123032","type":"4","value":"asifkhn617%40gmail.com;","id":"123032","userid":"snstestbuild003@gmail.com","last_update":"1389607937995","status":"N","photo_type":null,"importance":null,"sensitivity":null,"subject":null,"folder":null,"anniversary":null,"first_name":"%C2%B0%E1%83%A6%E2%80%A2%C3%81%C5%9A%E2%84%90%C5%A6+%C3%81%E2%84","middle_name":"","last_name":"","display_name":null,"birthday":"1900-01-01","body":";","categories":"","children":null,"hobbies":null,"initials":null,"languages":null,"nickname":null,"spouse":null,"suffix":"","title":"","gender":null,"assistant":null,"company":"","department":"","job_title":";","manager":null,"mileage":null,"office_location":null,"profession":null,"companies":null},{"contact":"123028","type":"3","value":"%2B919407568901;","id":"123028","userid":"snstestbuild003@gmail.com","last_update":"1389607933269","status":"N","photo_type":null,"importance":null,"sensitivity":null,"subject":null,"folder":null,"anniversary":null,"first_name":"%E0%AE%90%E0%B8%84%E0%B8%A0%D0%BA%E0%B9%80t%E0%AE%90+%E2%97%8F%E","middle_name":"","last_name":"","display_name":null,"birthday":"1900-01-01","body":";","categories":"","children":null,"hobbies":null,"initials":null,"languages":null,"nickname":null,"spouse":null,"suffix":"","title":"","gender":null,"assistant":null,"company":"","department":"","job_title":";","manager":null,"mileage":null,"office_location":null,"profession":null,"companies":null}]

And this is the binding part where it is bind with html

<div data-bind="foreach: {data: Contacts}">
        <div class="srch_contnt gray_bg" >
          <div class="srch_contnt_icon"></div>
          <div class="srch_contnt_heading"><span data-bind="text: urldecode(first_name)"></span><span data-bind="text: urldecode(last_name)"></span></div>
          &nbsp<span data-bind="text: decodeURIComponent(value.replace(';', ''))"></span> </div></div>

The first_name and the last_name properties are urlencoded when they come from server, and are urldecoded while being bound, which works perfectly well for normal names, quite recently I started getting weird names in the fields like

°ღ•ÁŚℐŦ Á�

Which is actually when url encoded looks like

%C2%B0%E1%83%A6%E2%80%A2%C3%81%C5%9A%E2%84%90%C5%A6+%C3%81%E2%84

now if i have 3 contacts, the first one with proper name display well, and the second one with such weird character doesn't display at all, and may be that's where it breaks down and after that even if there are good names in the collection of contacts, nothing else shows up.

Answer 1

Fixed it,

This particular string was raising an exception of type "Malformed URI sequence"

I made a function which can handle this in try catch

function urldecodeSafe(inputValue)
{
  var retVal;
  try
  {    
    retVal = urldecode(inputValue);    
  }
  catch(err)
  {
    retVal = "No Name";
  }
  return retVal;
}

and used it as

<a class="ContactDetails" href="#ContactDetails" rel="#ContactDetails" data-bind="click: $parent.PickDataWithNumber">
              <div class="list_container gray_bg mrgT3px" >
              <div class="list_contact_icon" ></div>
              <div class="contact_name" ><span data-bind="html: urldecodeSafe(first_name)"></span> <span data-bind="html: urldecodeSafe(last_name)"></span></div>
              <div class="contact_number"><span data-bind="text: decodeURIComponent(value.replace(';', ''))"></span></div>

Answer 2

Create a computed binding your model like so...

self.cleanLastName = ko.computed(function(){
   // RETURN A CLEANED UP NAME HERE... maybing using encodeURIComponent()
}

Bind to this function. You may also want to try binding with "html" rather than "text" if you trust our source... the html binding is a bit more permissive.