JavaScript 中 JSON 的嵌套列表答案

【问题标题】：Nested List to JSON in JavaScriptJavaScript 中 JSON 的嵌套列表
【发布时间】：2018-02-25 05:35:55
【问题描述】：

我正在编写将采用 n 深嵌套列表并转换为 JSON 的代码。

遇到了一个奇怪的问题。

Plunk：

https://plnkr.co/edit/gHCoVakRPREYq6IBAGrQ?p=preview

HTML：

<div class="dd" name="category-nestable" id="nestable">
  <ol class="dd-list">
    <li class="dd-item" data-type="section" data-id="42" id="42">
      <div class="dd-handle">
        <span style="font-weight: bold" >Company</span>
      </div>
      <ol class="dd-list">
        <li class="dd-item" data-type="section" data-id="43" id="43">
          <div class="dd-handle">
            <span style="font-weight: bold" >Group</span>
          </div>
          <ol class="dd-list">
            <li class="dd-item" data-type="section" data-id="45" id="45">
              <div class="dd-handle">
                <span style="font-weight: bold" >SubGroup</span>
              </div>
              <ol class="dd-list">
                <li class="dd-item" data-type="section" data-id="45" id="45">
                  <div class="dd-handle">
                    <span style="font-weight: bold" >Sub-sub-Group</span>
                  </div>
                </li>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
      </li>
      <li class="dd-item" data-type="section" data-id="44" id="44">
        <div class="dd-handle">
          <span style="font-weight: bold" >User</span>
        </div>
      </li>
    </ol>
</div>

JavaScript：

function newSaveCategories() {
    var nestableSections = $("#nestable>ol>li");
    var categories = newBuildCategories(nestableSections);
    var json = JSON.stringify(categories, null, 2);
    alert(json);
}

function newBuildCategories(categoriesRead) {
    var categories = [];

    categoriesRead.each(function() {
        var category = {};
        category.CategoryId = $(this).attr('data-id');
        category.CategoryName = $(this).find(".dd-handle").first().text().trim();
        category.SubCategories = newBuildCategories($(this).find('.dd-list').find('.dd-item'));
        categories.push(category);
    });      
    return categories;
}

错误：

【问题讨论】：

因此，如果我们检查 `var categories = newBuildCategories(nestableSections);` 我们希望看到一个包含两个成员的数组：` [{CategoryName: 'Company' ... }, {CategoryName: 'User' ...}]`当我下载你的plunk时，将alert更改为console.log，点击Save，在Chromium中打开开发者控制台，我看到了这个结果。
您可以在警告框中看到...，在控制台中检查。它显示了每一件事。您需要更改嵌套函数。

标签： javascript jquery json recursion

【解决方案1】：

我认为您需要使用children 而不是find。

find 匹配所有后代，无论多深。 children 仅匹配直系子女。您当前的代码是抓住孙子并将他们视为孩子。

【讨论】：

这解决了问题，重复来自 find，谢谢。