jquery.data returning json string instead of object

Question

I am rendering json into an html data attribute and using jquery.data to read the attribute. I am expecting $('[data-attribute]').data('attribute') to parse the json and return an object but it intermittently returns a string instead.

location.html.erb

<div data-location="<%= render 'location_json' %>">

location_json.erb

<%= @location.to_json(
      only: [:id, :name, :lat, :lng],
      method: [:display_name]) %>

location.js

var location = $('[data-location]').data('location')

I suspect an encoding/escaping problem, any ideas?

Answer 1

ERB was intermittently adding newlines which resulted in a json string that jquery.data wouldn't parse. For example, this parsed correctly:

<div data-location="{name&quot;:&quot;Bandido&#x27;s&quot;}">

But this did not (note trailling double quote on newline):

<div data-location="
{name&quot;:&quot;Bandido&#x27;s&quot;}
">

To prevent ERB from adding newlines, add a dash before the closing ERB tag

-%>

Solution:

<div data-location="<%= render 'location_json' -%>">