title: Accessing to a multidimensional PHP array in JavaScript
body: <p>I want to show a jQuery dialog with details of one row in the table (that only shows part of information). This is an example of what I want to do. </p>
  
  <p>The problem: When the image of 'View more details' of a row is clicked, the JS function receives the id of the row clicked. I can't assign  to JS variable 'data' as I did in the HTML part of the code. How can I solve this? Is a good way to do it?</p>
  
  <pre><code>&lt;script&gt;
      $(function() {    
          $( "#dialog" ).dialog({
              autoOpen: false,
              height: 400,
              width: 600,
              buttons: [{
                  text: "Close",
                  click: function() {
                      $(this).dialog("close");
                  }
              }]
          });
  
          $(".details").click(function(){
              $("#dialog").empty();
              var i = $(this).attr('id');
              var data = &lt;?=$cars[i]['price']?&gt;;
              $("#dialog").append("&lt;p&gt;Car:"+data+"&lt;/p&gt;");
              $("#dialog").dialog("open");
          });
      });
  &lt;/script&gt;
  
  &lt;table&gt;
      &lt;?php for($i = 0; $i &lt; count($cars); $i++) { ?&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;?=$cars[$i]['model']?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;?=$cars[$i]['colour']?&gt;&lt;/td&gt;
              &lt;td&gt; 
                  &lt;img class="details" id="&lt;?=$i?&gt;" style="cursor: pointer;" src="http://localhost/ci/public/images/details.png" width="40" height="40" alt="Details"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;?php } ?&gt;
  &lt;/table&gt;
  </code></pre>