如何從JSON物件遞回添加HTML元素？

我有一個未知大小、鍵數和深度級別的 JSON 物件。例子：

{
  "domains": [
    {
      "url_part": "domainOne.com",
      "children": [
        {
          "url_part": "one",
          "children": [
            {
              "url_part": "a",
              "children": [
                {
                  "url_part": "page1",
                  "children": []
                },
                {
                  "url_part": "page2",
                  "children": []
                }
              ]
            },
            {
              "url_part": "b",
              "children": []
            },
            {
              "url_part": "c",
              "children": []
            }
          ]
        },
        {
          "url_part": "two",
          "children": [
            {
              "url_part": "a",
              "children": [
                {
                  "url_part": "page1",
                  "children": []
                },
                {
                  "url_part": "page2",
                  "children": []
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "url_part": "domainTwo.com",
      "children": []
    }
  ]
}

我希望有一個頁面，最初每個域都有一個按鈕，然后當您單擊每個按鈕時，它會向下展開一層：

domainOne.com

domainTwo.com

當你點擊DomainOne.com變成：

domainOne.com

- 一

- 二

domainTwo.com

我可以為每個域創建一個按鈕，但在為孩子制作按鈕時只能達到下一級。

我正在傳遞：

• parentJSON（第一次呼叫中的域[“domainone.com”]）
• 樹級別（跟蹤縮進）
• currentURL（用于命名和以后使用）
• “aboveDiv”，所有子元素都附加在其中的 div

我嘗試遞回使用的函式如下所示：

function childrenButtons(parentJSON, level, currentURL, aboveDiv){
                if (parentJSON["children"] == "[]") {
                    //if the JSON you are passing in doesnt have children, this is the end
                    console.log("         no more kids to show            ");
                    return 0;
                }
                else {
                 
                    
                    for (let j = 0; j < parentJSON["children"].length; j  ) {

                        button.addEventListener("click", function () {
                            ////for each child, create their own div
                            const childDivElement = document.createElement("div");
                            const domainDivElementID = "childDivElement"   j;
                            childDivElement.setAttribute("id", domainDivElementID);
                            aboveDiv.append(childDivElement);

                            //create and add button with name = full path of button
                            const button = document.createElement("button");
                            const currChild = domains[i]["children"][j]["url_part"];
                            fullURL = currentURL   "/"   currChild;
                            button.innerHTML = fullURL;
                            button.style.marginLeft = level*20;
                            childDivElement.append(button);

                            let newParentJSON = parentJSON["children"][j]
                            console.log(parentJSON["children"][j]);

                            treeLevel  ;
                            return childrenButtons(newParentJSON, treeLevel, fullURL, childDivElement);

                        }, false);
                    }
                }
            }

uj5u.com熱心網友回復：

您可以通過事件委托來做到這一點......

const data = 
  { domains: 
    [ { url_part: 'domainOne.com', children:
        [ { url_part: 'one', children: 
            [ { url_part: 'a', children:
                [ { url_part: 'page1', children: [] } 
                , { url_part: 'page2', children: [] } 
              ] } 
            , { url_part: 'b', children: [] } 
            , { url_part: 'c', children: [] } 
          ] } 
        , { url_part: 'two', children: 
            [ { url_part: 'a', children: 
                [ { url_part: 'page1', children: [] } 
                , { url_part: 'page2', children: [] } 
      ] } ] } ] } 
    , { url_part: 'domainTwo.com', children: [] } 
  ] } 

const eDomains = document.querySelector('#domains-div')

addButtons( data.domains, eDomains, '' )

eDomains.onclick = evt =>
  {
  if (!evt.target.matches('button')) return

  console.clear()
  console.log( evt.target.textContent )
  }

function addButtons( jsoList, elm, path )
  {
  let UL = elm.appendChild(document.createElement('ul'))

  for ( let {url_part,children } of jsoList )
    {
    let LI = UL.appendChild( document.createElement('li'))
    LI.appendChild( document.createElement('button')).textContent = path   url_part 
    if (children.length > 0)
      addButtons( children, LI, path   url_part   '/')
    }
  }

ul { list-style: none; padding-left: 1em; }
button { min-width: 6em; margin: .1em 0; text-align: left; }

<div id="domains-div"></div>

標籤：javascript html json 递归

上一篇：使用兩個比較器時阻塞遞回呼叫

下一篇：在javascript中使用filter()來實作curriable()是可行的，但是，uisngmap()是可行的，為什么？