Extracting October pages indentation in JSON for a Vue.js app

问题

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.

Based on this post : How to get static page dropdown in OctoberCMS with get page tree?

I used the following code :

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);
        }        
    }    
}

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

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 ?

Thanks for help

EDIT :

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"
]

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:}

回答1:

Use this code

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;
}

Output

[
  {
    "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.

来源：https://stackoverflow.com/questions/62435433/extracting-october-pages-indentation-in-json-for-a-vue-js-app