title: 'Uncaught SyntaxError: Unexpected token x in JSON at position 1' when trying to parse HTML embeded string JSON
body: <p>I've being trying to parse a hardcoded JSON string to an usable format, but I can't find a way to get it work, getting 'Unexpected token' or just weird outputs. Library used: <strong>jQuery</strong>. The data to be stored is:</p>
  
  <pre><code>x:10
  y,10
  </code></pre>
  
  <p>and</p>
  
  <pre><code>x:200
  y:10
  </code></pre>
  
  <p>It's stored in a <code>data</code> attribute called <code>data-pos</code>, and I've tried multiple solutions, listed below:</p>
  
  <ul>
  <li><strong>Token error results (all combinations)</strong>:</li>
  </ul>
  
  <p><strong><em>Used functions</em></strong></p>
  
  <pre><code>JSON.parse(data);
  $.parseJSON(data);
  jQuery.parseJSON(data);
  </code></pre>
  
  <p><strong><em>Data formats</em></strong></p>
  
  <pre><code>data-pos="{'x':10,'y':10}"
  data-pos="{'x':'10','y':'10}"
  data-pos="{x:'10',y:'10'}"
  data-pos="{x:10,y:10}"
  </code></pre>
  
  <ul>
  <li><strong>Just weird output (no parsing)</strong>:</li>
  </ul>
  
  <p><strong><em>Used functions</em></strong></p>
  
  <pre><code>alert(data);
      --&gt; output: 
          !!DATA AS IS!!
          !!DATA AS IS!!
  
  alert ('x: ' + data.x + ' y: ' + data.y); /* Using {x: 200, y: 10} format */
      --&gt; outputs:
          x: undefined y: undefined
          x: {y'    &lt;-- Yep, THIS. No typos. IDK what the hell is going on.
  </code></pre>
  
  <p><strong><em>Data formats</em></strong></p>
  
  <pre><code>data-pos="{'x':10,'y':10}"
  data-pos="{'x':'10','y':'10}"
  data-pos="{x:'10',y:'10'}"
  data-pos="{x:10,y:10}"
  </code></pre>
  
  <p><strong>Sourcefile:</strong></p>
  
  <pre><code>&lt;html&gt;    
      &lt;head&gt;
          &lt;script&gt;var devmode = true&lt;/script&gt;
          &lt;script&gt;var loadExec=false&lt;/script&gt;
          &lt;script src="/files/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body id="body" class="selectable nooverflow"&gt;
          &lt;div class="container hidden desktop"&gt;
              &lt;div class="window selectable"  data-pos=!!DATA!!&gt;
                  &lt;div class="titlebar"&gt;
                      &lt;span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false"&gt;Window 1&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="window" data-pos=!!DATA!!&gt; 
                  &lt;div class="titlebar"&gt;
                      &lt;span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false"&gt;Window 2&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;link rel="stylesheet" type="text/css" href="/files/css/style.css"&gt;
          &lt;script src="/files/js/core.js"&gt;&lt;/script&gt;       &lt;!-- irrelevant --&gt;
          &lt;script src="/files/js/subcore.js"&gt;&lt;/script&gt;    &lt;!-- irrelevant --&gt;
          &lt;script&gt;        
              $(function () {
                  $(window).on("load", function () {
                      $('.window').each(function (index) {
                          if (!loadExec) {
                              var data = $(this).data('pos');
                              //alert(data + "\nDatatype: " + (typeof data));
                              if (data) {
                                  alert(data);
  
                                  //PARSING HERE!! &lt;----------
  
                                  $(this).css({ 'top': data.y, 'left': data.x, position: 'absolute' });
                              }
  
                              loadExec = true;
                              $('.container').removeClass('hidden');
                          }
                      });
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've been searching but all I could find was unsuccesfull or ajax orientated. I just need to embed this JSON string in an attribute or some inside-DOM way. I just can't find the solution.</p>
  
  <p><strong>THANKS FOR YOUR TIME!</strong></p>