递归函数Chrome书签循环和附加<ul> <li>

Question

我正试图循环浏览chrome书签，并使用递归函数获取所有文件夹。我能够正确记录所有文件夹，因此_.each和if folder工作正常，但很难正确附加<ul><li>

对象chrome.bookmarks.getSubTreeASYNC:

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

这是这个问题的正确解决方案，不需要像我想的那样使用Promise：

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)
}