The topic

let menu = [
    { "Id": 1, "ParentId": null, "Sort": 0."Name": "Menu 1" },
    { "Id": 2."ParentId": 1, "Sort": 0."Name": "Menu - 1" },
    { "Id": 3."ParentId": 1, "Sort": 1, "Name": "Menu 1-2" },
    { "Id": 4."ParentId": 2."Sort": 2."Name": The 1-1-2 "menu" },
    { "Id": 5, "ParentId": 2."Sort": 1, "Name": The 1-1-1 "menu" },
    { "Id": 6, "ParentId": null, "Sort": 1, "Name": "Menu 2" },
    { "Id": 7, "ParentId": 6, "Sort": 0."Name": "Menu 2-1" },
    { "Id": 8, "ParentId": 6, "Sort": 1, "Name": "Menu 2-2" },
    { "Id": 9, "ParentId": 8, "Sort": 2."Name": The 2-2-2 "menu" },
    { "Id": 10, "ParentId": 8, "Sort": 1, "Name": The 2-2-1 "menu" },
    { "Id": 11."ParentId": 10, "Sort": 0."Name": The 2-2-1-1 "menu"}] convert the above data result to'< ul > < li > < ul > < li > < ul > < li > < a > menu 1-1-1 < / a > < / li > < / ul > < ul > < li > < a > menu 1-1-2 < / a > < / li > < / ul > < a > menu 1-1 < / a > < / li > < / ul > < ul > < li > < a > menu < 1-2 / a > < / li > < / ul > menu < a > 1 < / a > < / li > < / ul > 'This formatCopy the code

Their thinking

As long as the use of recursion is examined in this problem, first we have to transform the data structure into the following format

{
    "Id": 1,
    "ParentId": null,
    "Sort": 0."Name": "Menu 1"."children": [{"Id": 2."ParentId": 1,
        "Sort": 0."Name": "Menu - 1"."children": [{"Id": 5,
            "ParentId": 2."Sort": 1,
            "Name": The 1-1-1 "menu"
          },
          {
            "Id": 4."ParentId": 2."Sort": 2."Name": The 1-1-2 "menu"}]}, {"Id": 3."ParentId": 1,
        "Sort": 1,
        "Name": "Menu 1-2"}}]Copy the code

The idea of recursion is mainly used, and the specific method is as follows

function digui(total, item) {
    if(! total || total.children === 0)return
    for (let obj of total) {
        if(obj. Id = = = item. ParentId) {obj. Children = obj. Children | | [] / / here according to the data obj Id and ParentId generation children. Children. Push (item) obj.children.sort((a, b) => a.Sort - b.Sort) } digui(obj.children, item) } }function genData(menu) {
    return menu.reduce((total, item, index) => {
        if (item.ParentId) {
            digui(total, item)
        } else {
            total.push(item)
        }
        return total
    }, [])
}
Copy the code

The data is transformed, and then the transformed data generates a string, again using a recursive approach

function genHtml(item) {
    return `
        <ul>
            <li>
                <a>${item.Name}</a>
                ${(item.children ? item.children.map(_item => genHtml(_item)).join('') : '')}
            </li>
        </ul>
    `
}
Copy the code

Finally get results

genData(menu).map(genHtml).join(' ')
Copy the code

conclusion

The problem was too slow and had to be refueled.

Please pay attention to Finished products drifted north, Upper, Guangzhou and Shenzhen periodically and send finished products with excellent quality.

Finished to see first don’t go, a praise ⇓ ah, praise ⇘ better!