如何将html中的列表项解析为javascript数组

How to parse list item in html to javascript array

本文关键字：javascript 数组 列表 html      更新时间：2023-09-26

我要将数组从php传递给javascript，我的解决方案是使用php生成如下的html列表项：

<ul id="data" class="hidden">
  <li value="0"> 
    <ul>
      <li value="id">1</li> 
      <li value="productLine">Vintage Cars</li> 
    </ul>
  </li>
  <li value="1"> 
    <ul>
      <li value="id">2</li> 
      <li value="productLine">Ships</li>    
    </ul>
   </li>
   <li value="2"> 
    <ul>
      <li value="id">3</li> 
      <li value="productLine">Trains</li>   
    </ul>
  </li>
</ul>

并使用javascript DOM API使其成为多维关联数组：

function selectProductLine(){
    var rootUlNode = document.getElementById('data');
    var rootLiNodes = rootUlNode.children;
    var hiddenHash = {};
    for(var i=0;i< rootLiNodes.length;i++){
        var rootLiNodeValue = rootLiNodes[i].getAttribute('value');     
        var liNodes = rootLiNodes[i].firstElementChild.children;
        for(var i=0; i < liNodes.length;i++){
            hiddenHash[rootLiNodeValue] = {};
            var liNodeValue = liNodes[i].getAttribute('value');
            var liNodeContent = liNodes[i].textContent;
            hiddengegHash[rootLiNodeValue][liNodeValue] = liNodeContent;
        }
    }
return hiddenHash;
}

但是运行代码会使我的浏览器崩溃，所以我无法调试它，有人可以指出我的问题在哪里吗？我认为应该有一种将数据从php传输到javascript的元素方法，比如使用json，有人能在这个主题上提供更好的解决方案或资源吗？

如果您有一个PHP数组，可以使用[json_encode][1]将其呈现为JSON对象。例如：

<?php
$arr = array(
    array('id' => 1, 'productLine' => 'Vintage Cars'),
    array('id' => 2, 'productLine' => 'Ships')
);
echo 'var products = ' . json_encode($arr) . ';';
?>

将呈现如下：

var products = [ { 'id': 1, 'productLine': 'Vintage Cars' }, { 'id': 2, 'productLine': 'Ships' } ];

好吧，据我所知，你的脚本几乎可以。然而，您已经将hiddenHash从底部开始的5行拼写错误。如果我只是将hiddengeghash更改为hiddenhash，它至少在jsfiddle中运行时没有错误。我随意添加了一个document.write，只是为了确保它真的返回一个数组。

http://jsfiddle.net/2WBjJ/

我还将第二个I更改为i2，因为它们用于同一个循环

更好的方法是在PHP中将数据结构编码为JSON，然后在生成的字符串客户端调用JSON.parse（）。您可以使用json_encode对数据进行编码，并使用json2.js解析字符串。

请注意适当地转义JSON字符串。

相关文章：