Pfthb

I'm trying to loop trough the chrome bookmarks and get all folders by using recursive function. I'm able to log all folders correctly so _.each and if folder works fine but struggling to correctly append <ul><li>

The object 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": ""
 
]

Here is my function, at the beginning getFolders gets the very top level ID eg. 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) => )
 )

 

 getTree(props.menuContainerId, bmkNode)

 

getFolders('0')

My current output:

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

My desire output:

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

This is correct solution for this problem, no need for Promise as I thought:

 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 )
 element.append(ul)
 )
 

 getTree(props.menuContainerId, bmkNode)