将HTML ul元素嵌套到JSON

5anewei6 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(99)

我想制作一个使用拖放的表单生成器应用程序。我有一个主<li>标签。在此标记下的嵌套结构中还有其他<li>和<ul>标记。
作为我的应用程序的要求，我需要将此结构作为JSON。我想我应该使用递归函数，但我失败了。我使用Angular和jQuery。你能帮我吗？

<li id="mainList" style="list-style: none;">
  <div class="row">
    <div class="col-md-12">
      <ul class="sortable ui-sortable">
        <li data-is-component="true" data-type-text="Text Field" data-type="1" data-element-id="n8b78496-04bd">
          <div class="form-group builder-component mt-1">
            <label style="font-size:smaller" for="exampleFormControlInput1">Text Field</label>
            <input type="email" class="form-control form-control-sm" placeholder="Text Field" disabled="">
          </div>
        </li>
        <li data-is-component="true" data-type-text="Number" data-type="3" data-element-id="nbdbeecb-ff2d">
          <div class="form-group builder-component mt-1">
            <label style="font-size:smaller" for="exampleFormControlInput1">Number</label>
            <input type="email" class="form-control form-control-sm" placeholder="Number" disabled="">
          </div>
        </li>
        <li id="n9cdfd2a-95ea" data-is-component="false" data-type-text="Column 2" data-type="60" data-element-id="n9cdfd2a-95ea">
          <div class="row">
            <div class="col-md-6">
              <ul class="sortable ui-sortable">
                <li data-is-component="true" data-type-text="Choice" data-type="5" data-element-id="n4488d94-bf63">
                  <div class="form-group builder-component mt-1">
                    <label style="font-size:smaller" for="exampleFormControlInput1">Choice</label>
                    <input type="email" class="form-control form-control-sm" placeholder="Choice" disabled="">
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-md-6">
              <ul class="sortable ui-sortable">
                <li data-is-component="true" data-type-text="Select Box" data-type="6" data-element-id="n1179190-213f">
                  <div class="form-group builder-component mt-1">
                    <label style="font-size:smaller" for="exampleFormControlInput1">Select Box</label>
                    <input type="email" class="form-control form-control-sm" placeholder="Select Box" disabled="">
                  </div>
                </li>
                <li data-is-component="true" data-type-text="Date / Time" data-type="7" data-element-id="n2cd4518-633e">
                  <div class="form-group builder-component mt-1">
                    <label style="font-size:smaller" for="exampleFormControlInput1">Date / Time</label>
                    <input type="email" class="form-control form-control-sm" placeholder="Date / Time" disabled="">
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li data-is-component="true" data-type-text="Color" data-type="11" data-element-id="n6103ae8-67e4">
          <div class="form-group builder-component mt-1">
            <label style="font-size:smaller" for="exampleFormControlInput1">Color</label>
            <input type="email" class="form-control form-control-sm" placeholder="Color" disabled="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</li>

字符串
我尝试创建的JSON输出：

{
  "id": "mainList",
  "childs": [{
      "id": "n8b78496-04bd",
      "childs": null
    },
    {
      "id": "nbdbeecb-ff2d",
      "childs": null
    },
    {
      "id": "n9cdfd2a-95ea",
      "childs": [
        [{
          "id": "n4488d94-bf63",
          "childs": null
        }],
        [{
          "id": "n1179190-213f",
          "childs": null
        }, {
          "id": "n2cd4518-633e",
          "childs": null
        }]
      ]
    },
    {
      "id": "n6103ae8-67e4",
      "childs": null
    }
  ]
}

型
谢谢你的帮忙。

JSON

来源：https://stackoverflow.com/questions/76850119/nested-html-ul-element-to-json

2条答案

按热度按时间

wfauudbj1#

你可以使用一个递归函数来收集它在下一层找到的li元素，为它们创建对象，然后使用递归为每个子元素做同样的事情：

const collectChildren = (elem) => elem.tagName == "UL" 
        ? [...elem.children]
        : Array.from(elem.children, collectChildren).flat();

function collectListItems(li) {
    const children = collectChildren(li);
    return {
        id: li.dataset.elementId ?? li.id,
        children: children.length ? Array.from(children, collectListItems) : null
    };
}

const result = collectListItems(document.getElementById("mainList"));
console.log(result);

个字符

赞(0）回复(0）举报 2023-08-08

beq87vna2#

请提供当前版本的Angular或jQuery代码

赞(0）回复(0）举报 2023-08-08