Parsing special characters from JSON string in JS

Question

Today, while I was working with some ajax requests, I encountered really strange issue. After sending simple request, server response in JSON format looks like below:

{
coach_id: "172"
email: "foo@bar.com"
focus_area: "Ke da\nMetrics"
id: "433"
success_metrics: "\"Calm\""
user_id: "809"
}

I want to use this object as data for pure.js template (it doesn't matter, as it's problem itself, not in template system).

$('#new-client').directives({
    '#client-email@value' : 'email',
    '#client-focus' : 'focus_area',
    '#client-success' : 'success_metrics'
}).render(myObject);

Email as simple input, focus_area and success_metrics as textareas.

However, I'm not able to get my object special characters parsed properly.

For example "Ke da\\nMetrics" should looks: "Ke da Metrics"

I already tried encoding it, replacing characters etc. but with no effect.

Any hints?

Whole object after stringifying:

{
    "id": "433",
    "coach_id": "172",
    "organization_id": "33",
    "user_id": "809",
    "start_date": "0202-02-02",
    "sessions_allotment": "5",
    "sessions_frequency": "TwiceAMonth",
    "sessions_frequency_other": "None",
    "tags": "KeTag,SanJose",
    "focus_area": "\\' \\\" Ke da\\nMetrics",
    "success_metrics": "\\\"Calm\\\"",
    "organization_level": "Grand P",
    "bill_rate": "34",
    "first_name": "Ke",
    "last_name": "Da",
    "email": "keda@mailinator.com",
    "coach_first_name": "Dawn",
    "coach_last_name": "Gilbert"
}

Here's console log http://screenshu.com/static/uploads/temporary/6n/0n/f2/2vt72y.jpg

Answer 1

\\n is the Unix line ending.

I'm not sure if a line ending is what you desire but much like \\"Calm\\" would print:

"Calm"

Then "Ke da\\nMetrics" would print:

Ke da
Metrics

So - in your case - without going on a man-hunt to find out why there is a line-ending in the value - you could use this code:

myObject.focus_area = myObject.focus_area.replace(/\n/g, '');
$('#new-client').directives({
    '#client-email@value' : 'email',
    '#client-focus' : 'focus_area',
    '#client-success' : 'success_metrics'
}).render(myObject);

As I say - the problem is with server encoding of your value - ideally the JSON would not contain the \\n.

---

Thinking about above - it's probably a UTF8 issue - sorry bad answer above...

If you try loading the JSON using utf8 as the encoding does the newline still showup?

Answer 2

One of the solutions would be to use JavaScript functions with directives and use some filter method removing / replacing / ... all unwanted characters from input JSON object (eg to remove \\n or replace \\n with space; that can be done using regular expressions)

You can have more filtering functions (each performing specific type of filtering) and chain them together in functions with directives.

Assuming your filter methods would be called filter(arg) and otherFilter(arg) , your directive could be as follows:

$('#new-client').directives({
    '#client-email@value' : function(arg) { 
         return filter(arg.context.email); 
    },
    '#client-focus' : function(arg) { 
         return filter(arg.context.focus_area); 
    },
    '#client-success' : function(arg) { 
         return otherFitler(filter(arg.context.success_metrics)); 
    }
}).render(myObject);

I hope that will help.