title: How to parse list item in html to javascript array
body: <p>I'm to pass an array form php to javascript, my solution is use php to generate an html list items like following:</p>
  
  <pre><code>&lt;ul id="data" class="hidden"&gt;
    &lt;li value="0"&gt; 
      &lt;ul&gt;
        &lt;li value="id"&gt;1&lt;/li&gt; 
        &lt;li value="productLine"&gt;Vintage Cars&lt;/li&gt; 
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li value="1"&gt; 
      &lt;ul&gt;
        &lt;li value="id"&gt;2&lt;/li&gt; 
        &lt;li value="productLine"&gt;Ships&lt;/li&gt;    
      &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li value="2"&gt; 
      &lt;ul&gt;
        &lt;li value="id"&gt;3&lt;/li&gt; 
        &lt;li value="productLine"&gt;Trains&lt;/li&gt;   
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and use javascript DOM API to make it to an multidimensional associate array:</p>
  
  <pre><code>function selectProductLine(){
      var rootUlNode = document.getElementById('data');
      var rootLiNodes = rootUlNode.children;
      var hiddenHash = {};
      for(var i=0;i&lt; rootLiNodes.length;i++){
          var rootLiNodeValue = rootLiNodes[i].getAttribute('value');     
          var liNodes = rootLiNodes[i].firstElementChild.children;
          for(var i=0; i &lt; liNodes.length;i++){
              hiddenHash[rootLiNodeValue] = {};
              var liNodeValue = liNodes[i].getAttribute('value');
              var liNodeContent = liNodes[i].textContent;
              hiddengegHash[rootLiNodeValue][liNodeValue] = liNodeContent;
          }
      }
  return hiddenHash;
  }
  </code></pre>
  
  <p>But running the code can crash my browser, so I can't debug it, anyone can point out where my problem is? And I think there should be an element way to transfer data from php to javascript, like using json, could someone provide a better solution or resource on this topic?</p>