title: jquery json needing to parse json from data element before using it
body: <p>I am experiencing some odd behavior on some JSON data i have applied to a data attribute in my HTML, i have it working using a fix but I'm not sure why i need to apply this fix.
  I am using jquery-1.9.0</p>
  
  <p>Case 1 - working without <code>$.parseJSON()</code></p>
  
  <p><a href="http://reelfilmlocations.co.uk/browse-locations/" rel="nofollow noreferrer">http://reelfilmlocations.co.uk/browse-locations/</a></p>
  
  <p>On this page i have data attributes applied to the icons below the images, i'll use the map icon as an example <img src="https://i.stack.imgur.com/XmD2n.png" alt="map icon"></p>
  
  <p>the html looks like this:</p>
  
  <pre><code>    &lt;img
         src="/images/Icons/map circle.fw.png" width="24" height="24" 
         class="icon mapLink"
         data-location='{
             "id":"&lt;?php echo($row_rs_locations['id_loc']);?&gt;",
              "slug":"&lt;?php echo($row_rs_locations['slug_loc']);?&gt;",
              "page":"&lt;?php echo($cur_page);?&gt;",
              "lat":"&lt;?php echo($row_rs_locations['maplat_loc']);?&gt;",
              "lng":"&lt;?php echo($row_rs_locations['maplong_loc']);?&gt;",
              "pinType":"loc",
              "name":"&lt;?php echo($row_rs_locations['name_loc']);?&gt;",
              "linkType":"list"
        }'
      /&gt;
  </code></pre>
  
  <p>The JSON Object:</p>
  
  <pre><code>{ "id":"5", "slug":"boston-manor-house-and-park", "page":"1", "lat":"51.492341", "lng":"-0.3186064000000215", "pinType":"loc", "name":"Boston Manor House and Park", "linkType":"list" }
  </code></pre>
  
  <p>i checked on <a href="http://jsonlint.com/" rel="nofollow noreferrer">http://jsonlint.com/</a> and this is indeed valid json</p>
  
  <p>I have the following jquery to run when the a map icon is clicked</p>
  
  <pre><code>$('.wrapper').delegate('.mapLink','click',function() {
              var myData = $(this).data('location');
              console.log(myData); // correctly logs json object
              $('.middle_section').hide();
              $('#mapContent').show();
              createMarkerWithInfo(myData, true); 
          })
  </code></pre>
  
  <p>everything works as expected the data-location element is read in as json and i can use it as a json object without doing anything else</p>
  
  <hr>
  
  <p>Case 2 - need to use <code>$.parseJSON()</code></p>
  
  <p><a href="http://2012.reelfilmlocations.co.uk/browse-locations/" rel="nofollow noreferrer">http://2012.reelfilmlocations.co.uk/browse-locations/</a></p>
  
  <p>This is almost a duplicate of the above case (this version will be optimized for mobile devices)</p>
  
  <p>code is pretty much the same except the click event retrieves the data-location element but as text not a json object i need to parse it using <code>$.parseJSON(myData)</code> before i can use it.</p>
  
  <pre><code>$('.wrapper').delegate('.mapLink','click',function() {
              //console.log('mapLink clicked');
              var myData = $(this).data('location');
              console.log(myData);// outputs text not a json object
              myData = $.parseJSON(myData) //parse the data
              console.log(myData);// outputs a JSON object
              $('.middle_section').hide();
              $('#mapContent').show();
              createMarkerWithInfo(myData, true); 
          })
  </code></pre>
  
  <p>I'm not understanding why in two scripts which in effext are exactly the same, i have to use $.parseJSON and on the other i dont, seems weird behaviour to me, can anyone enlighten me?</p>