从laravel刀片视图中的JSON数据创建菜单 - Creating menu from JSON data in laravel blade views

Creating menu from JSON data in laravel blade views

我试图有multi level menu通过JSON data，以下是我的JSON格式数据:

{"pages": [
        {"pagelink": "index.html", "pagename": "Mysite", "submenu": [
                    {"pagelink": "#", "pagename": "sublevel1", "submenu": "NULL"},
                    {"pagelink": "#", "pagename": "submenu2", "submenu": [
                        {"pagelink": "#", "pagename": "sublevel2", "submenu": "NULL"}
                        ]
                    }
                ]
        }, 
        {"pagelink": "templates.html", "pagename": "Templates", "submenu": "NULL"}, 
        {"pagelink": "aboutus.html", "pagename": "About Us", "submenu": "NULL"}, 
        {"pagelink": "contactus.html", "pagename": "Contact Us", "submenu": "NULL"}
    ]
}

当我没有sub menu字段时，我习惯通过以下方式调用菜单:

<nav id="nav">
    <ul id="main-nav" class="hidden-mobile">
        @foreach($contents->pages as $pages)
            <li class="menu-item-has-children">
                <a href="{{ $pages->pagelink }}">{{ $pages->pagename }}</a>
            </li>
        @endforeach
    </ul>
</nav>

当我添加子菜单时，我尝试使用以下代码:

<nav id="nav">
    <ul id="main-nav" class="hidden-mobile">
        @foreach($contents->pages as $pages)
            <li class="menu-item-has-children">
                <a href="{{ $pages->pagelink }}">{{ $pages->pagename }}</a>
                @if(isset($contents->pages->submenu))
                     <ul class="sub-nav">
                        @foreach($contents->pages->submenu as $submenu)
                            <li><a href="{{ $submenu->pagelink }}">{{ $submenu->pagename }}</a> </li>
                        @endforeach
                     </ul>
                @endif
            </li>
        @endforeach
    </ul>
</nav>

但是没有成功。

请指导我，我是否需要更改JSON data格式，或者blade文件本身是否有任何出路。

您必须调用$pages，而不是$contents->pages

@if(isset($pages->submenu))
    <ul class="sub-nav">
        @foreach($pages->submenu as $submenu)
            <li><a href="{{ $submenu->pagelink }}">{{ $submenu->pagename }}</a> </li>
        @endforeach
    </ul>
@endif

如果您想创建多维JSON，并且您不知道将有多少嵌套数组，则必须为子菜单

创建额外的刀片。

<ul class="sub-nav">
    @foreach($pages as $submenu)
        <li>
            <a href="{{ $submenu->pagelink }}">{{ $submenu->pagename }}</a>
            @if (isset($submenu->submenu))
                @include('submenu', ['pages' => $submenu->submenu])
            @endif
        </li>
    @endforeach
</ul>

然后你的菜单栏看起来像:

<nav id="nav">
    <ul id="main-nav" class="hidden-mobile">
        @foreach($contents->pages as $pages)
            <li class="menu-item-has-children">
                <a href="{{ $pages->pagelink }}">{{ $pages->pagename }}</a>
                @if(isset($pages->submenu))
                    @include('submenu', ['pages' => $pages->submenu])
                @endif
            </li>
        @endforeach
    </ul>
</nav>

这个解决方案应该工作，如果你将删除"submenu": "NULL"。如果不是，则必须额外检查元素submenu是否在所有条件下都是数组。