Сделать многомерный массив из JSON результат в Vuejs - PullRequest
Новая
       2

Сделать многомерный массив из JSON результат в Vuejs

0 голосов
/ 14 декабря 2018

У меня есть этот запрос 

 $menus = Menu::whereStatus(1)
                ->paginate(50)

Результат: 

{
  "current_page": 1,
  "data": [{
      "id": 5,
      "route_name": "student-list",
      "parent_id": 41,
      "position": 0,
      "status": 1,
      "is_displayable": 1,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "fa fa-bandcamp",
      "is_common_access": 0,
      "menu_name": "Students",
      "translations": [{
          "id": 5,
          "menu_id": 5,
          "menu_name": "Students",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 6,
      "route_name": "log-out",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "Sign Out",
      "translations": [{
          "id": 6,
          "menu_id": 6,
          "menu_name": "Sign Out",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 7,
      "route_name": "sign-in",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "Sign In",
      "translations": [{
          "id": 7,
          "menu_id": 7,
          "menu_name": "Sign In",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 8,
      "route_name": "sign-in-form",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "Sign In Form",
      "translations": [{
          "id": 8,
          "menu_id": 8,
          "menu_name": "Sign In Form",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 9,
      "route_name": "log-in",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "Log In",
      "translations": [{
          "id": 9,
          "menu_id": 9,
          "menu_name": "Log In",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 10,
      "route_name": "role-check",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "Role Check",
      "translations": [{
          "id": 10,
          "menu_id": 10,
          "menu_name": "Role Check",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 12,
      "route_name": "login-form",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "First Sign In",
      "translations": [{
          "id": 12,
          "menu_id": 12,
          "menu_name": "First Sign In",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 13,
      "route_name": "admin",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 1,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "fa fa-tachometer",
      "is_common_access": 1,
      "menu_name": "Dashboard",
      "translations": [{
          "id": 13,
          "menu_id": 13,
          "menu_name": "Dashboard",
          "locale": "en",
          "site_id": 1
        }, {
          "id": 563,
          "menu_id": 13,
          "menu_name": "dgdfgdfgdf",
          "locale": "fr",
          "site_id": 1
        }
      ]
    }, {
      "id": 14,
      "route_name": "employee-profile",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "Profile",
      "translations": [{
          "id": 14,
          "menu_id": 14,
          "menu_name": "Profile",
          "locale": "en",
          "site_id": 1
        }
      ]
    }, {
      "id": 15,
      "route_name": "choose-lang",
      "parent_id": 0,
      "position": 0,
      "status": 1,
      "is_displayable": 0,
      "site_id": 1,
      "deleted_at": null,
      "icon_name": "",
      "is_common_access": 1,
      "menu_name": "Language Chooser",
      "translations": [{
          "id": 15,
          "menu_id": 15,
          "menu_name": "Language Chooser",
          "locale": "en",
          "site_id": 1
        }
      ]
    }
  ],
  "first_page_url": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list?page=1",
  "from": 1,
  "last_page": 63,
  "last_page_url": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list?page=63",
  "next_page_url": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list?page=2",
  "path": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list",
  "per_page": 10,
  "prev_page_url": null,
  "to": 10,
  "total": 628
}

Я пытался: 

<div
  class="col-md-3"
  style="padding: 5px;"
  v-for="item in menus.data"
  v-bind:key="item.id">
      <div 
        class="col-md-12" 
        style="border: 3px solid cornflowerblue; padding: 5px; background-color: whitesmoke;">
          <input type="checkbox" checked :value="item.id" v-model="selectedMenus">
          <span class="checkbox-label">{{item.menu_name}}</span>
      </div>
</div>
<br>

Описание: Я использовал dimsav перевод пакетов. Именно поэтому route_name находится в другом массиве.Пожалуйста, посмотрите на столбец parent_id.Не все ссылки меню имеют значение parent_id.Я хочу показать родительское меню, а затем дочернее меню в этом родительском меню (см. Рисунок). enter image description here.

Как я могу сделать это на стороне клиента?Не могли бы вы помочь мне?Я не знаю, как использовать jsfiddle или plunkr, иначе я мог бы сделать это.Вас просят сделать это, если вы мудры.Вот почему я дал полный JSON.

Отредактировано

Я сделал это в моем блейд-файле: 

Menu $menuModel
$menus=$menuModel->where('parent_id', 0)->get();


 @if(isset($menus) && !$menus->isEmpty())

    @foreach($menus as $menu)

        <div class="col-md-4" style="padding: 5px; ">
            <div class="col-md-12" style="border: 3px solid cornflowerblue; padding: 5px; background-color: whitesmoke;">


                @php($displayedChildMenus=getChildMenus($menuModel,$menu->id))
                @if(isset($displayedChildMenus)  && count($displayedChildMenus) > 0)


                    <div class="col-md-12" style="border: 1px solid blue; background-color: cornflowerblue; opacity:0.8; color: white;">
                        <input title="" type="checkbox" @if(in_array($menu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass"  id={{ 'view'.'_'.$menu->id }} data-type='view' data-role-id={{ $groupId }} data-menu-id={{ $menu->id }}>
                        {{ $menu->id }}    {{ $menu->menu_name }}
                    </div>

                    @foreach($displayedChildMenus as $displayedchildMenu)
                        @php($displayedSubChildMenus=getChildMenus($menuModel,$displayedchildMenu->id))


                        @if(isset($displayedSubChildMenus)  && count($displayedSubChildMenus) > 0)

                            <div class="col-md-12" style="border: 2px solid Green ;padding:0;background-color: MintCream   ; opacity:0.8; ">
                                <div class="col-md-12" style="background-color: cornflowerblue  ;color: white; ">
                                    <input title="" type="checkbox" @if(in_array($displayedchildMenu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" data-menu-id={{ $displayedchildMenu->id }}>
                                    {{ $displayedchildMenu->id }}   {{ $displayedchildMenu->menu_name }}
                                </div>
                                @foreach($displayedSubChildMenus as $displayedSubChildMenu)
                                    <div class="col-md-12" style=" padding:0 25px; ">
                                        <input title="" type="checkbox"  @if(in_array($displayedSubChildMenu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" data-menu-id={{ $displayedSubChildMenu->id }}>
                                        {{ $displayedSubChildMenu->id }}   {{ $displayedSubChildMenu->menu_name }}

                                    </div>
                                @endforeach


                            </div>
                        @else {{--$displayedSubChildMenus--}}


                        <div class="col-md-12">
                            <input title="" type="checkbox" @if(in_array($displayedchildMenu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass"  id={{ 'view'.'_'.$menu->id }} data-type='view' data-role-id={{ $groupId }} data-menu-id={{ $displayedchildMenu->id }}>
                            {{ $displayedchildMenu->id }}   {{ $displayedchildMenu->menu_name }}
                        </div>


                        @endif

                    @endforeach




                @else {{--$displayedChildMenus--}}

                <div class="col-md-12" style="border: 1px solid blue; background-color: cornflowerblue; opacity:0.8; color: white;">

                    <input title="" type="checkbox" @if(in_array($menu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" id={{ 'view'.'_'.$menu->id }} data-type='view' data-role-id={{ $groupId }} data-menu-id={{ $menu->id }}>

                    {{ $menu->id }}   {{ $menu->menu_name }}

                </div>
                @endif

            </div>
        </div>

    @endforeach

@endif

1 Ответ

0 голосов
/ 14 декабря 2018

Если я вас правильно понимаю, вы пытаетесь сгруппировать все меню по соответствующим parent_id, чтобы затем вы могли v-for по группе и отобразить различные разделы.

Если это так, вы можете использоватьcomputed свойство для расчета вашего двумерного массива: 

computed: {
  groups() {
    return this.data.reduce((groups, item) => {
      const g = item.parent_id
      groups[g] = groups[g] || []
      groups[g].push(item)
      return groups
    }, {})
  }
}

и затем его рендеринг 

<div v-for="parent in groups" ...>
  <div v-for="child in parent" ...>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...