Rails: Calling to_json method in HTML

The key thing to bear in mind thinking about this is: If this is destined to be read by a javascript function, and converted back into a javascript object, then it can be rendered out onto the page in any way whatsoever, as long as that can be translated back again in the javascript function.

We'll be doing the "object to string" translation in ruby, and the "string to object" translation in javascript, so we'll need to pick some translation system which works in a standard way in both languages. I'm going with URI.escape in ruby, and decodeURIComponent for the reverse in javascript. URI.escape is a standard system (meaning the rules should be the same across different languages) and is web-safe, meaning the result shouldn't have any characters that will break a url or html tag.

in the erb template:

<% @rules = [[{" noun" => "app","comparison" => "was","value" => "opened in the last two days"},{"noun" => "deliverable","comparison" => "is","value" =>"push notification"}]] %>

<div id="data-filters-test" data-filters="<%= URI.escape(@rules.to_json) %>"></div>

Obviously you can replace @rules with your own method that reads the data from the database or whatever: the above is just my version so i could test it.

resultant html:

<div id="data-filters-test" data-filters="[[%7B%22value%22:%22opened%20in%20the%20last%20two%20days%22,%22%20noun%22:%22app%22,%22comparison%22:%22was%22%7D,%7B%22noun%22:%22deliverable%22,%22value%22:%22push%20notification%22,%22comparison%22:%22is%22%7D]]"></div>

Your final step will be to translate this back from the URI.escape'd string into an object, in your javascript. I would do this like so: (the following lists the results of each step, for explanation)

//get the string
var escapedString = $("#data-filters-test").data("filters");
// => "[[%7B%22value%22:%22opened%20in%20the%20last%20two%20days%22,%22%20noun%22:%22app%22,%22comparison%22:%22was%22%7D,%7B%22noun%22:%22deliverable%22,%22value%22:%22push%20notification%22,%22comparison%22:%22is%22%7D]]"

//reverse the URI.escape, to get it back to json
var json = decodeURIComponent(escapedString);
// => "[[{"value":"opened in the last two days"," noun":"app","comparison":"was"},{"noun":"deliverable","value":"push notification","comparison":"is"}]]"

//convert the json string to a javascript object
var filter = JSON.parse(json);
// => <Object>

Obviously you could wrap this all up in a single step if you wanted, or, even better, a function, eg

function uriEscapedToObject(escapedString){
  return JSON.parse(decodeURIComponent(escapedString));
}

Now in your js to handle this element you can write

var filters = uriEscapedToObject($("#data-filters-test").data("filters"));