treeview nested loop jquery

I have an application that has a treeview of all our clients. For each client you might have multiple Item, I Have table like this

+--------+----------+-------------------+
|ID      | ParentID | GroupName         |
|--------+----------+-------------------+
| 1      | Null     |    Main Group     |
| 2      | 1        |    Item 1         |
| 3      | 2        |    Item 2         |
| 4      | 2        |    Item 3         |
| 5      | 3        |    Item 2.1       |
| 6      | 2        |    Item 4         |
| 7      | 4        |    Item 3.1       |
| 8      | 7        |    Item 3.1.1     |
| 9      | 2        |    Item 5         |
| 10     | 3        |    Item 2.2       |
+--------+---------+--------------------+

AND JASON DATA coming form server like this

[{"ID":1,"ParentID":null,"GroupName":"Main Group"},{"ID":2,"ParentID":1,"GroupName":"Item 1"},{"ID":3,"ParentID":2,"GroupName":"Item 2"},{"ID":4,"ParentID":2,"GroupName":"Item 3"},{"ID":5,"ParentID":3,"GroupName":"Item 2.1"},{"ID":6,"ParentID":2,"GroupName":"Item 14"},{"ID":7,"ParentID":4,"GroupName":"Item 3.1"},
    {"ID":8,"ParentID":7,"GroupName":"Item 3.1.1"},{"ID":9,"ParentID":2,"GroupName":"Item 5"},{"ID":10,"ParentID":3,"GroupName":"Item 2.2"}]

and How Can I get by jquery In Html somting like that

<ul>
    <li id="1"><a>Main Group</a>
        <ul>
        <li id="2"><a>Item 1</a></li>
        <li id="3"><a>Item 2</a></li>
           <ul>
           <li id="5"><a>Item 2.1</a></li>
           <li id="10"><a>Item 2.2</a></li>
           </ul>
        <li id="4"><a>Item 3</a></li>
           <ul>
           <li id="7"><a>Item 3.1</a></li>
              <ul>
              <li id="8"><a>Item 3.1.1</a></li>
              </ul>
           </ul>
        <li id="6"><a>Item 4</a></li>
        <li id="9"><a>Item 5</a></li>
        </ul>
    </li>    
</ul>

I try Use that code but I get wrong result

$.getJSON('test.json', function(data) {
     var items = [];

      $.each(data, function(key, val) {
        items.push('<li id="' + val.ID + '">' + val.GroupName + '</li>');
      });

      $('<ul/>', {
        html: items.join('')
      }).appendTo('body');
    });