jquery nested ul li

1function buildList(data) {
2    var $ul = $('<ul></ul>');
3    for (const key in data) {
4        var $child = $('<li></li>');
5        $ul.append($child)
6        if (typeof data[key] === 'object') {
7            $child.text = $child.text(key);
8            $child.append(buildList(data[key]));
9        } else {
10            $child.text = $child.text(key + ' : ' + data[key]);
11        }
12    }
13    return $ul;
14}

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2<div id="div_containing_ul"></div>

1jQuery(document).ready(function($) {
2
3$.get('url', function(data){
4
5            var $ul = $('<ul></ul>');
6
7            function getList(item, $list) {
8
9                $.each(item, function (key, value) {
10                    var $li = $('<li />');
11                    $li.append($('<a href="#">' + key + '</a>'));
12
13                    var $subul = $("<ul/>");
14
15                    $.each(value, function(i) {
16                        var subli = $('<li/>')
17                        .text(value[i])
18                        .appendTo(subli);
19                    });
20                    $subul.append(subli);
21
22
23                    $li.append($subul)
24
25                });
26            }
27            getList(data, $ul);
28            $ul.appendTo("div_containing_ul");
29    });});