title: Passing JSON data from php to html-data attribute and then to Javascript
body: <p>i'm creating a plugin in which the user adds custom settings in <code>data-</code> attribute in HTML. Settings are in JSON format. I'm using these settings in Javascript.</p>
  
  <p>It has got <code>preview</code>, <code>base</code> and <code>paths</code> properties. <code>preview</code> and <code>base</code> have string values, but <code>paths</code> is an array of <code>path</code> objects.</p>
  
  <p>It works fine when i add JSON setting directly into the HTML:</p>
  
  <pre><code>&lt;div data-side="front" data-params='{"preview": "assets/img/products/tshirt/front-preview.png", "base": "assets/img/products/tshirt/front-base.png", "paths": "[{\"name\": \"base\", \"path\": \"M 324.00,33.00 C 324.00,33.00\", \"x\": 92, \"y\": 16, \"height\": 370}, {\"name\": \"collar\", \"path\": \"M 358.00,46.10 C 358.00,46.10\", \"x\": 170, \"y\": 17, \"height\": 21}, {\"name\": \"leftSleeve\", \"path\": \"M 633.17,170.00 C 633.17,170.00\", \"x\": 288, \"y\": 66, \"height\": 131}, {\"name\": \"leftCuff\", \"path\": \"M 595.00,438.00 C 615.47,438.23\", \"x\": 293, \"y\": 172, \"height\": 33}, {\"name\": \"rightSleeve\", \"path\": \"M 142.00,140.00 C 143.46,150.28\", \"x\": 47, \"y\": 64, \"height\": 131}, {\"name\": \"rightCuff\", \"path\": \"M 48.00,375.38 C 48.00,375.38 95.00\", \"x\": 41, \"y\": 166, \"height\": 36}]"}'&gt;
  </code></pre>
  
  <p>I'm getting this value using <code>data('Params')</code> method of jQuery. Its type is <code>object</code>.</p>
  
  <p>Now, when i'm trying to <code>json_encode</code> a php array and pass it to the <code>data-</code>, it's added successfully </p>
  
  <pre><code>&lt;div data-side="front" data-params=&lt;?php echo "'".json_encode($dataParams)."'"; ?&gt;&gt;
  </code></pre>
  
  <p>But now typeof <code>data('Params')</code> in Javascript is <code>string</code>. So, i'm getting a JSON parse error. If i remove <code>paths</code> key, its type changes to object.</p>
  
  <p>Here's the <code>print_r</code> of the array that i'm encoding:</p>
  
  <pre><code>Array
  (
      [preview] =&gt; assets/img/products/tshirt/front-preview.png
      [base] =&gt; assets/img/products/tshirt/front-base.png
      [paths] =&gt; Array
          (
              [0] =&gt; Array
                  (
                      [name] =&gt; base
                      [path] =&gt; M 324.00,33.00 C 324.00,33.00
                      [x] =&gt; 92
                      [y] =&gt; 16
                      [height] =&gt; 370
                  )
                  ... and more path arrays
  
          )
  
  )
  </code></pre>
  
  <p>So, why does it changes its type to string if i include <code>paths</code> key? Any way to solve it? </p>
  
  <p>Edit:</p>
  
  <p>Here's the output:</p>
  
  <p><a href="https://i.stack.imgur.com/Y4Eip.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Y4Eip.png" alt="Output"></a></p>