递归功能Chrome书签循环和附加<ul><li>

Question

我试图通过铬书签循环，并通过使用递归函数来获取所有文件夹。 我能够正确地记录所有文件夹，以便_.each和if folder工作正常，但奋力正确追加<ul><li>

对象chrome.bookmarks.getSubTree ASYNC：

http://www.mocky.io/v2/5be950062e00006700f144d6

 [ { "children": [ { "children": [ { "dateAdded": 1509653754344, "id": "459", "index": 18, "parentId": "1", "title": "Test 1", "url": "https://www.test1.net/" }, { "dateAdded": 1509653754369, "id": "460", "index": 19, "parentId": "1", "title": "Test 2", "url": "https://www.test2.net/" } ], "dateAdded": 1529656829217, "dateGroupModified": 1538037498559, "id": "1", "index": 0, "parentId": "0", "title": "Bookmarks Bar" }, { "children": [ { "children": [ { "children": [ { "children": [], "dateAdded": 1542016268115, "dateGroupModified": 1542016268115, "id": "496", "index": 0, "parentId": "492", "title": "F40" }, { "children": [], "dateAdded": 1542016288842, "dateGroupModified": 1542016288842, "id": "497", "index": 1, "parentId": "492", "title": "Testarossa" } ], "dateAdded": 1542016224744, "dateGroupModified": 1542016288843, "id": "492", "index": 0, "parentId": "489", "title": "Ferrari" }, { "children": [], "dateAdded": 1542016232765, "dateGroupModified": 1542016232765, "id": "493", "index": 1, "parentId": "489", "title": "Toyota" }, { "children": [], "dateAdded": 1542016245690, "dateGroupModified": 1542016245690, "id": "494", "index": 2, "parentId": "489", "title": "BMW" }, { "children": [], "dateAdded": 1542016253590, "dateGroupModified": 1542016253590, "id": "495", "index": 3, "parentId": "489", "title": "Audi" } ], "dateAdded": 1542016199154, "dateGroupModified": 1542016253590, "id": "489", "index": 0, "parentId": "2", "title": "Cars" }, { "children": [ { "children": [], "dateAdded": 1542016326727, "dateGroupModified": 1542016326727, "id": "498", "index": 0, "parentId": "490", "title": "Boeing" }, { "children": [], "dateAdded": 1542016335148, "dateGroupModified": 1542016335148, "id": "499", "index": 1, "parentId": "490", "title": "Airbus" } ], "dateAdded": 1542016208019, "dateGroupModified": 1542016335149, "id": "490", "index": 1, "parentId": "2", "title": "Planes" }, { "children": [], "dateAdded": 1542016213955, "dateGroupModified": 1542016213955, "id": "491", "index": 2, "parentId": "2", "title": "Ships" } ], "dateAdded": 1529656829217, "dateGroupModified": 1542016213955, "id": "2", "index": 1, "parentId": "0", "title": "Other Bookmarks" } ], "dateAdded": 1541543894421, "id": "0", "title": "" } ] 

这是我的功能，从一开始， getFolders就获得了最顶层的ID。 2：

const getFolders = (bmkNode) => {
        const props = {
            menuContainerId: $('#bookmarks')
        }

        const getTree = (element, bmkNode) => {
            const ul = $('<ul data-node="' + bmkNode + '"></ul>')
            let li

            chrome.bookmarks.getSubTree(bmkNode, (folder) => {
                    _.map(folder[0].children, (item) => {

                        if (item.url === undefined || item.url === null) {

                            li = $('<li data-node="' + item.id + '">' + item.title + '</li>')
                            ul = $('<ul data-node="' + item.parentId + '"></ul>') //v1
                            ul.append(li)

                            if (_.size(item.children) > 0) {

                                getTree(ul, item.id)

                            }

                            element.append(ul)

                        }

                    })
                })

        }

        getTree(props.menuContainerId, bmkNode)

    }

getFolders('0')

我当前的输出：

<div id="bookmarks">
        <ul data-node="0">
            <li data-node="1">Bookmarks Bar</li>
        </ul>
        <ul data-node="0">
            <li data-node="2">Other Bookmarks</li>
            <ul data-node="2">
                <li data-node="489">Cars</li>
                <ul data-node="489">
                    <li data-node="492">Ferrari</li>
                    <ul data-node="492">
                        <li data-node="496">F40</li>
                    </ul>
                    <ul data-node="492">
                        <li data-node="497">Testarossa</li>
                    </ul>
                </ul>
                <ul data-node="489">
                    <li data-node="493">Toyota</li>
                </ul>
                <ul data-node="489">
                    <li data-node="494">BMW</li>
                </ul>
                <ul data-node="489">
                    <li data-node="495">Audi</li>
                </ul>
            </ul>
            <ul data-node="2">
                <li data-node="490">Planes</li>
                <ul data-node="490">
                    <li data-node="498">Boeing</li>
                </ul>
                <ul data-node="490">
                    <li data-node="499">Airbus</li>
                </ul>
            </ul>
            <ul data-node="2">
                <li data-node="491">Ships</li>
            </ul>
        </ul>
</div>

我的愿望输出：

 <div id="bookmarks">
    <ul>
        <li>Bookmarks Bar</li>
        <li>Other Bookmarks</li>
        <ul>
            <li>Cars
                <li>Ferrari
                    <ul>
                        <li>F40</li>
                        <li>Testarossa</li>
                    </ul>
                </li>
                <li>Toyota</li>
                <li>BMW</li>
                <li>Audi</li>
            </li>
            <li>Planes</li>
            <li>Ships</li>
            <ul>

            </ul>
            <ul>
                <li>Boeing</li>
                <li>Airbus</li>
            </ul>
        </ul>
    </ul>
</div>

Answer 1

这是解决此问题的正确方法，无需像我想的那样承诺：

   const getFolders = bmkNode => {
        const props = {
          menuContainerId: $("#bookmarks")
        }

        const getTree = (element, bmkNode) => {
          let ul = $('<ul data-node="' + bmkNode + '"></ul>')
          let li

          chrome.bookmarks.getSubTree(bmkNode, folder => {
            _.map(folder[0].children, item => {
              if (item.url === undefined || item.url === null) {
                li = $('<li data-node="' + item.id + '"></li>')
                li.append(item.title)

                ul.append(li)
                if (_.size(item.children) > 0) {
                  getTree(li, item.id)
                }

              }
            })
            element.append(ul)
          })
        }

        getTree(props.menuContainerId, bmkNode)
      }