提取Vue.js应用程序的JSON缩进

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

根据这篇文章：

我使用了以下代码：

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使缩进变平

我如何操作返回的JSON结构来简化它，只使用页面->url和页面->标题并保留页面和子页面缩进

谢谢你的帮助

编辑：

此代码与$level一起生成：

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数据具有以下级别（而不是原始数据可视化）：

使用此代码

公共函数启动（）{
\RainLab\Pages\Classes\Page:：extend（函数（$model）{
$model->addDynamicMethod（'getPageOptions'，function（）{
$theme=\Cms\Classes\theme:：getEditTheme（）；
$pageList=new\RainLab\Pages\Classes\pageList（$theme）；
$treePageList=$pageList->getPageTree（true）；
返回$this->getRecursivePage（$treePageList）；
});
});
$pages=\RainLab\pages\Classes\Page:：getPageOptions（）；
标题（'Content-Type:application/json'）；
echo json_编码（$pages）；
退出（）；
}
公共函数getRecursivePage（$pages）{
$pageDetails=[]；
foreach（$iPage页）{
$detail=[]；
$detail['page']=['title'=>$iPage->page->title，'url'=>$iPage->page->url]；
$subpages=$this->getRecursivePage（$iPage->subpages）；
如果（计数（$subpages）>0）{
$detail['subpages]=$subpages；
}
$pageDetails[]=$detail；
}
返回$pageDetails；
}

输出

---

如果有任何疑问，请发表评论。

我通过添加两个函数并按顺序调用它们来解决这个问题。一个用于页面，一个用于静态页面。 这些函数正在构建一个具有所需结构的复杂对象，该对象将用于构建菜单。

---

谢谢

有一个

$level

变量，我想它可以帮助您实现这一点，或者如果您分享您想要的输出，我们可以帮助您$level在扁平数组中的URL前面添加“-”。我想让JSON结构保持“干净”。谢谢Hardik，它工作得很好！！！在我发布完整的路由器之前，你能告诉我如何使用静态页面菜单的菜单内容来完成页面吗？很抱歉，没有收到你的请求。你能再解释一下吗：）你的代码可以很好地处理页面元素，但我想添加静态页面插件中可用的菜单元素。我的10月份演示站点（MDB加载）在菜单中提供了这两种功能。（）未返回我添加的博客页面、项目和其他内容。我不知道如何添加后端图片？

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

[
  {
    "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"
            }
          }
        ]
      }
    ]
  }
]