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

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

Answer 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.

Answer 2

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