我想使用JSON数据创建动态列表

Question

大家好我想为我的标题菜单创建一个动态列表（请参考下面的快照，你会得到想法）。列表数据来自页面加载时的API请求，JSON数据的结构如下所示。实际上这是php数组，但最后看到我做的是JSON数据。无论如何我得到这些数据，并且能够循环进入ajax成功通话。

[请参阅注释和最后的HTML代码，以附加我想要的结构。也看到我上传的快照我认为快照说的一切]

  <?php 
$categories = array
(
    '0' => array
        (
            'id' => 1,
            'Name' => 'New Category',
            'sub' => array
                (
                )

        ),

    '1' => array
        (
            'id' => 3,
            'Name' => 'ddd',
            'sub' => array
                (
                    '0' => array
                        (
                            'id' => 4,
                            'Name' => 'test1',
                            'parent_id' => 3,
                            'sub' => array
                                (
                                )

                        ),

                    '1' => array
                        (
                            'id' => 5,
                            'Name' => 'Test123 recipe',
                            'parent_id' => 3,
                            'sub' => array
                                (
                                )

                        ),

                    '2' => array
                        (
                            'id' => 6,
                            'Name' => 'abceg',
                            'parent_id' => 3,
                            'sub' => array
                                (
                                    '0' =>array(
                                    'id' => 7,
                                    'Name' => 'xyz',
                                    'parent_id' => 6,
                                    'sub' => array
                                        (
                                        )
                                    )
                                )

                        )   

                )

        )

);
header('Content-Type:application/json');
echo json_encode($categories);
?>

所以我唯一想要的是逻辑来安排我的菜单，我正在使用这个库让我很容易安排。 mega menu

现在假设上面的json数组中的类别ddd是test1的父类，test123的recipe，abceg那么这些类别应该属于ddd，那么结构应该是这样的

|ddd|
  |test1| 
  |test123 recipe|
  |abceg|

现在再次从JSON数据中你可以看到xyz类别属于abceg，因此最终结构应该如下所示

|ddd|
  |test1| 
  |test123 recipe|
  |abceg|
      |xyz|

请帮我解决这个问题。这是我到目前为止所做的事情，而且我正在达到2级的雇佣关系。

jQuery(document).ready(function ($) {
    console.log('in');
    $.ajax({
        type: 'GET',
        url: '../get_list_data/mydata-json.php',
        dataType: 'json',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        success: function (data) {
            var items = [];
            for (var i = 0; i < data.length; i++) {
                if (data[i].parent_id == 1 && data[i].id != 1) {

                    items.push('<li class="has-children"><a href="">' + data[i].name + '</a></li>');
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].parent_id == 1 && data[i].id == data[i + 1].parent_id) {
                            items.push('<ul class="cd-secondary-dropdown is-hidden"><li class="go-back"><a href="#1">Menu</a></li><li class="see-all"></li><li class="has-children "><a href="travail.html">' + data[i + 1].name + '</a><ul class="is-hidden"><li class="go-back"><a href="#1">' + data[i].name + '</a></li></ul></li></ul></li> ');
                        }
                    }
                }
            }
            $('.parent-list').append(items.join(''));
        }, error: function (status) {
            console.log("failed");
        }
    });
})

注意：首先列出项目，如果有孩子，然后在悬停我们将让其子项在另一侧弹出窗口，如果第二个列表项也有子项，那么我们将在其下面获取其子项。有关html结构，请参阅mega menu。另外，我有一个简单的结构，请使用此

<h2 class="main-menu">Magasiner par catégorie</h2>
<a href="#1" class="cd-close">Close</a>
<ul class="cd-dropdown-content parent-list">
    <li class="has-children main-category">
        <a href="">Affaires, Industrie</a>
        <ul class="cd-secondary-dropdown is-hidden">
            <li class="go-back"><a href="#1">Menu</a></li>
            <li class="see-all"></li>
            <li class="has-children ">
                <a href="travail2.html">Sécurité au travail</a>
                <ul class="is-hidden">
                    <li class="go-back"><a href="#1">Magasiner par catégorie</a></li>
                    <li>
                        <a href="divers.html">Accessoires divers</a>

                    </li>
                </ul>
            </li>
        </ul> <!-- .cd-secondary-dropdown -->
    </li> <!-- .has-children -->
</ul>

我面临的主要困难是在循环时我必须知道这个项目有level1，level2还是最终级别。请帮帮我。