如何把數(shù)組里的數(shù)據(jù)，遞歸成這個樣子，如下圖和代碼

問題

想要的效果，如紅框

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="div"></div>
    <div>
        <ul>
            <li>
                <a>1--1a</a>
            </li>
            <li>
                <a>2--2b</a>
                <ul>
                    <li>
                        <a>2.1--2.1b</a>
                        <ul>
                            <li>
                                <a>2.1.1--2.1.1b</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>2.2--2.2b</a>
                    </li>
                    <li>
                        <a>2.3--2.3b</a>
                    </li>
                </ul>
            </li>
            <li>
                <a>3--3c</a>
            </li>
        </ul>
    </div>
</body>

</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var data2 = [{
        id: "1",
        name: "1a",
        children: [{
            id: "1.1",
            name: "1.1a"
        }]
    }, {
        id: "2",
        name: "2b",
        children: [{
            id: "2.1",
            name: "2.1b",
            children: [{
                id: "2.1.1",
                name: "2.1.1.b"
            }]
        }, {
            id: "2.2",
            name: "2.2b"
        }, {
            id: "2.3",
            name: "2.3b"
        }]
    }, {
        id: "3",
        name: "3c"
    }]

    function test1(data) {
        var temp = "<ul>";

        if (data.children) {
            temp += test1(data.children)

        } else {
            data.forEach(item => {
                temp += "<li><a>" + item.id + "--" + item.name + "</a></li>";
            })
        }

        temp += "</ul>";
        return temp
    }


    $("#div").html(test1(data2))
</script>

回答

編輯回答

怣痛

    function test1(data) {
        var temp = "<ul>";

        data.forEach(item => {
            temp += "<li><a>" + item.id + "--" + item.name + "</a></li>";
            if (item.children) {
                temp += test1(item.children)
            }
        })

        temp += "</ul>";
        return temp
    }

    $("#div").html(test1(data2))

2017年4月11日 09:17

編輯回答

若相惜

  function test1(data) {
    const html = ['<ul>'];
    data.forEach(item => {
      html.push('<li>')
      html.push(`<a>${item.id}--${item.name}</a>`)
      if (item.children) {
        html.push(test1(item.children).join(''))
      }
      html.push('</li>')
    })
    html.push('</ul>')
    return html
  }

  $("#div").html(test1(data2).join(''))

2017年4月7日 10:15