为Vue.js应用提取JSON中的十月页面缩进 [英] Extracting October pages indentation in JSON for a Vue.js app

问题描述

为了在10月构建vue菜单，我有一个插件，我想在JSON数据中提取October页面结构，以保持页面和子页面的缩进.

For building a vue menu in October, I have a plugin that I want to extract the October pages structure in a JSON data keeping the pages and subpages indentation.

基于此帖子:我使用了以下代码:

public function boot() {
  \RainLab\Pages\Classes\Page::extend(function($model) {
      $model->addDynamicMethod('getPageOptions', function() {
          $theme = \Cms\Classes\Theme::getEditTheme();
          $pageList = new \RainLab\Pages\Classes\PageList($theme);
          $treePageList = $pageList->getPageTree(true);
          $pages = [];
          $this->getRecursivePage($pages, $treePageList);
          return $pages;
      });
  });
}

public function getRecursivePage(&$pages, $subpages, $level = 0) {        
    $level++;
    foreach($subpages as $pageArr) {        
        $pages[$pageArr->page->url] = 
               str_repeat('-',$level) . ' ' . $pageArr->page->title;                     
        if(count($pageArr->subpages) > 0) {            
            $this->getRecursivePage($pages, $pageArr->subpages, $level);
        }        
    }    
}

但是返回的$ treePageList太丰富了，$ pages使缩进变平.

but the returned $treePageList is too rich for that purpose and the $pages flattens the indentation.

我如何仅使用page-> url和page-> title并保持页面和子页面的缩进来操纵返回的JSON结构以简化它?

How could I manipulate the returned JSON structure to simplify it, with only page->url and page->title and keeping the pages and subpages indentation ?

感谢帮助

带有$ level的代码会产生:

This code with the $level produces :

array:9 [▼
  "/content" => "- Content"
  "/content/pages" => "-- Static Pages"
  "/content/content" => "-- Content"
  "/content/models" => "-- Models"
  "/content/urls" => "-- URLs"
  "/content/urls/tesets" => "--- tesets"
  "/test-sp" => "- test-sp"
  "/test-sp/oks" => "-- oks"
  "/test" => "- test"
]

但是我想要一个具有类似(非原始数据可视化)级别的JSON数据:

but I'd like to have a JSON data with levels like (not raw data visualization) :

▼ 0 
    page    {title: , url:}
    subpages    []
▼ 1 
    page    {title: , url:}
    subpages    
        ▼ 0 {title: , url:}
        ▼ 1 {title: , url:}
        ▼ 2 {title: , url:}
        ▼ 3 {title: , url:}
        ▼ 4 {title: , url:}
        ▼ 5 {title: , url:}
        ▼ 6 {title: , url:}
        ▼ 7 {title: , url:}
        ▼ 8 {title: , url:}
▼ 2 
    page    {title: , url:}
    subpages    
        ▼ 0 {title: , url:}
        ▼ 1 {title: , url:}
        ▼ 2 {title: , url:}

推荐答案

使用此代码

public function boot() {
  \RainLab\Pages\Classes\Page::extend(function($model) {
      $model->addDynamicMethod('getPageOptions', function() {
          $theme = \Cms\Classes\Theme::getEditTheme();
          $pageList = new \RainLab\Pages\Classes\PageList($theme);
          $treePageList = $pageList->getPageTree(true);
          return $this->getRecursivePage($treePageList);
      });
  });

  $pages = \RainLab\Pages\Classes\Page::getPageOptions();
  header('Content-Type: application/json');
  echo json_encode($pages);
  exit();
}

public function getRecursivePage($pages) {
  $pageDetails = [];
  foreach($pages as $iPage) {
      $detail = [];
      $detail['page'] = ['title' => $iPage->page->title, 'url' => $iPage->page->url];
      $subpages = $this->getRecursivePage($iPage->subpages);
      if(count($subpages) > 0 ) {
        $detail['subpages'] = $subpages;
      }
      $pageDetails[] = $detail;
  }
  return $pageDetails;
}

输出

[
  {
    "page": {
      "title": "static-page",
      "url": "/static-page"
    }
  },
  {
    "page": {
      "title": "/parent",
      "url": "/parent"
    },
    "subpages": [
      {
        "page": {
          "title": "child",
          "url": "/parent/child"
        },
        "subpages": [
          {
            "page": {
              "title": "another child",
              "url": "/parent/child/another-child"
            }
          },
          {
            "page": {
              "title": "another next",
              "url": "/parent/child/another-next"
            }
          }
        ]
      }
    ]
  }
]

如有疑问，请发表评论.

If any doubt please comment.

这篇关于为Vue.js应用提取JSON中的十月页面缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！