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

Question

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

there is `$level` variable which could help you to achieve that i guess, or if you share what out put you want we could help you — Hardik Satasiya, Jun 17 '20 at 19:07
$level just adds "-" before URLs in a flatted array. I'd like to keep the JSON structure an "clean" it. — Incremental, Jun 17 '20 at 20:42

Hardik Satasiya · Answer 1 · 2020-06-18T08:18:28.113

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.

Thanks Hardik, it's working perfectly !!! Before I publish the complete router, could you please tell me how to complete Pages with the menu content of Static Pages Menus ? — Incremental, Jun 18 '20 at 22:49
sorry but did not get your request can you explain it bit more :) — Hardik Satasiya, Jun 19 '20 at 07:29
Well your code is working fine with the Pages elements, but I would like to add also the menu elements available in Static Pages Plugin. My October demo site (MDB Loaded) provide both in the menu. (https://octobercms.com/theme/zanor-zanor-mdb-loaded) Blog Pages items and others I added are not returned. I don't know how to add a backend picture ? — Incremental, Jun 19 '20 at 07:50

score 0 · Answer 2 · answered Aug 22 '20 at 17:20

0

I solved this by adding 2 functions and calling them sequentially. One for Pages an one for Static Pages. The functions are building a complex object with the desired structure which will be use for building the menu. Thanks

answered Aug 22 '20 at 17:20

Incremental

27
1
8

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

2 Answers2

Linked