jQuery 树遍历 - 将无序列表元素嵌套到 JSON答案

【问题标题】：jQuery tree traversal - Nested Unordered list elements to JSONjQuery 树遍历 - 将无序列表元素嵌套到 JSON
【发布时间】：2010-07-03 20:22:12
【问题描述】：

好的，现在我这里有一个无序列表：

<ul id="mycustomid">
    <li><a href="url of Item A" title="sometitle">Item A</a>
        <ul class="children">
           <li><a href="url of Child1 of A" title="sometitle">Child1 of A</a>
               <ul class="children">
                 <li><a href="url of Grandchild of A" title="sometitle">Grandchild of A</a>
                    <ul class="children">
                       <li><a href="url of Grand Grand child of A" title="sometitle">Grand Grand child of A</a></li>
                    </ul>
                </li>
               </ul>
           </li>
        </ul>
    </li>
    <li><a href="url of Item B" title="sometitle">Item B</a></li>
    <li><a href="url of Item C" title="sometitle">Item C</a></li>
</ul>

基本上，我只想将此数据转换为 JSON 实体。我想在 jQuery 中完成这项工作，而且我认为我很难做到。上面的列表只是一个例子，实际上，我的列表理想情况下会有更多的孩子，并且可能有“n”级深（意思是，它会有孙子的孙子的孙子孙女......或更多）我已经失去了无数睡了几个小时，我想我哪儿也不去:(

我想提取这些东西：锚点内的文本、锚点的url和锚点的标题，并将它们放到一个JSON实体上

我上面的列表的 JSON 格式是这样的：

{
        name: "Item A",
        url: "url of Item A",
        title: "sometitle",
        children: [{
                   name: "Child1 of A",
                   url: "url of Child1 of A",
                   title: "sometitle",
                   children: [{
                                name: "Grandchild of A",
                                url: "url of Grandchild of A",
                                title: "sometitle",
                                children: [{
                                           name: "Grand Grand child of A",
                                           url: "url of Grand Grand child of A",
                                           title: "sometitle",
                                           children: []
                                           }]
                              }]
                   }]
},
           {
            name: "Item B",
            url: "url of Item B",
            title: "sometitle",
            children: []
           },
           {
            name: "Item C",
            url: "url of Item C",
            title: "sometitle",
            children: []
           }

一些有用的参考资料：

Javascript 解决方案： Traversing unordered lists using Javascript/Jquery

^ 这可能有效，但我需要的 JSON 输出格式如上所示，而不是此脚本输出的格式:(

其他参考资料：

How do I put unordered list items into an array

https://jsfiddle.net/yS6ZJ/1/

https://jsfiddle.net/CLLts/

https://jsfiddle.net/cWnwt/

请大家帮忙:(
很多个不眠之夜都让我头疼..（P.s - 我花了大约 40 多分钟的时间来编写整个页面以及代码）

【问题讨论】：

正在处理它。顺便说一句，您生成的 JSON 是一个对象数组，因此您应该有周围的 [ 和 ] 括号。 [ {}, {}, {} ]
谢谢 Samuel，但我的应用程序似乎使用了无效的 JSON，并且它使用了上述格式 :) 感谢您的输入 :)

标签： jquery json tree list traversal

【解决方案1】：

啊，一个有趣的小递归练习。我有一点时间，这就是我将如何做到的。这可以递归地工作很多层次，但假设您的数据不够深而无法爆炸内存（如果太深，浏览器中的递归会中断）。至少10级左右应该没问题。

我已经测试过了，似乎它可以工作，只需将它保存在 HTML 文件中就可以了。

抱歉，没有太多的 cmets（嗯，从技术上讲，根本没有 :)，这假设您可以很好地阅读 jQuery 和 JS 代码。如果您有任何问题，请在评论中提问，我很乐意为您解释。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Recursive list processor example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

$(document).ready(function() {

    var out = [];

    function processOneLi(node) {       

        var aNode = node.children("a:first");
        var retVal = {
            "title": aNode.attr("title"),
            "url": aNode.attr("href"),
            "name": aNode.text()
        };

        node.find("> .children > li").each(function() {
            if (!retVal.hasOwnProperty("children")) {
                retVal.children = [];
            }
            retVal.children.push(processOneLi($(this)));
        });

        return retVal;
    }

    $("#mycustomid").children("li").each(function() {
        out.push(processOneLi($(this)));
    });


    console.log("got the following JSON from your HTML:", JSON.stringify(out));

});

    </script>
</head>
<body>
<ul id="mycustomid">
    <li><a href="http://example.com/urlOfItemA" title="sometitle">Item A</a>
        <ul class="children">
           <li><a href="http://example.com/urlOfItemAChild1" title="sometitle">Child1 of A</a>
               <ul class="children">
                 <li><a href="http://example.com/urlOfItemAGrandchild" title="sometitle">Grandchild of A</a>
                    <ul class="children">
                       <li><a href="http://example.com/urlOfItemAGrandGrandChild" title="sometitle">Grand Grand child of A</a></li>
                    </ul>
                </li>
               </ul>
           </li>
        </ul>
    </li>
    <li><a href="http://example.com/urlOfItemB" title="sometitle2">Item '"" B</a></li>
    <li><a href="http://example.com/urlOfItemC" title="sometitle3">Item C</a></li>
</ul>
</body>
</html>

【讨论】：

抱歉，Jaanus，我不在办公桌前。非常感谢您的努力，您提供的代码简直完美无缺，您是我变相的祝福，您为我省去了很多头痛！非常感谢！！！ :)
你也应该标记接受的答案，无论你接受哪个，成为一个好的 Stackoverflow 公民:)
但是，它没有以我的格式输出 JSON？例如，我在属性上有引号，例如：“name”：“something”“title”：“something”相反，我需要它像name：“something”title：“something”谢谢
JSON 标准规定对象键必须用双引号括起来。我正在使用 Douglas Crockford 的标准 JSON 输出器，这是将 Javascript 对象转换为 JSON 字符串的行业标准。因此，您要求的是非标准的无效 JSON。为什么需要它？
1) 不用担心，我们曾经都是新手 :) 2) 我明白你的意思。像 JSON 这样的标准的要点是应用程序以标准方式输入和输出它。正确的做法是修复您的应用程序，使其接受标准的有效 JSON。如果那不可能，您也许可以让 tvanfonsson 的代码工作。您可以看到它如何将自定义 JSON 输出为字符串，并且您可以修改它来生成您需要的内容。但实际上，您应该修复这个其他应用程序。还有其他方法，但它们确实是倒退的坏习惯。

【解决方案2】：

似乎使用一个函数用于列表元素（子）集合和一个用于列表元素的递归解决方案将起作用。请注意，我假设您希望将其格式化为字符串，并且它实际上表示为数组。

$(function() {
    var json = formatListElements( $('#mycustomid > li') );
});

function formatListElements( elems )
{
    var contents = [] 
    $.each( elems, function( index, elem ) {
        contents[index] = formatListElement( elem );
    }
    return '[' + contents.join(', ') + ']';
}

function formatListElement( elem )
{
   var anchor = $(elem).children('a:first');
   return '{ "name": "' + quote( anchor.text() )
                + '", "url": "' + quote( anchor.attr('href') )
                + '", "title": "' + quote( anchor.attr('title') )
                + '", "children": ' + formatListElements( $(elem).find('> ul > li')
        + '}';
}

function quote( str )
{
    return str.replace( /"/g, '\\\"' );
}

【讨论】：

这会输出无效的 JSON，因为：1) 你没有引用属性值 2) 你没有转义字符串中的 ' 或 " 字符，你会引用属性值。否则很好。跨度>
@Jaanus -- 是的，只是一个快速的答案并且完全未经测试。我在属性周围添加了引号，并在字符串中引用了引号。
你现在的做法，你可能会得到太多的引用..不确定是否必须在 JSON "blah ' blah" 字符串中引用 ' ？ :)
@Jaanus -- 可能是对的，只需要引用双引号。不过我不认为它会受到伤害。
@tv - 我检查了 JSON 标准和 Doug Crockford 的 JSON stringifier。 JSON 标准明确讨论了双引号，因此双引号是唯一需要在字符串中转义的引号，而不是单引号。会很痛，因为输出中会有额外的反斜杠字符。

【解决方案3】：

以下源代码是我的解决方案。我认为已经足够清楚地展示了将ul转换为json对象的原理。祝你好运:)

$(function() {

  function buildJSON($li) {
    var subObj = { "name": $li.contents().eq(0).text().trim() };
    $li.children('ul').children().each(function() {
      if (!subObj.children) { subObj.children = []; }
      subObj.children.push(buildJSON($(this)));
    });
    return subObj;
  }
    
  var obj = buildJSON($("#ul-data").children());
  $('body').append('<pre>').find('pre').append(JSON.stringify(obj, null, 2));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul-data">
  <li><a href="#">AAA</a>
    <ul>
      <li><a href="#">DDD</a>
        <ul>
          <li><a href="#">EEE</a>
            <ul>
              <li><a href="#">FFF</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">BBB</a></li>
      <li><a href="#">CCC</a></li>
    </ul>
  </li>
</ul>

【讨论】：