Рекурсивная функция Chrome Bookmarks loop & append <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 получает идентификатор самого верхнего уровня, например. 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)
      }