在子级循环中获取父级 json 数据。（Laravel Vue js）答案

【问题标题】：Getting parent json data in child level loop. (Laravel Vue js)在子级循环中获取父级 json 数据。（Laravel Vue js）
【发布时间】：2021-07-19 22:12:28
【问题描述】：

我有从控制器获取的 API 数据

return parent::with('children')->get();

它给了我这个：

[
   {
      "id":1,
      "name":"George",
      "children":[
         {
            "id":4,
            "parent_id":"1",
            "name":"Glory"
         },
         {
            "id":5,
            "parent_id":"1",
            "name":"Susan"
         }
      ]
   },
   {
      "id":2,
      "name":"Robin",
      "children":[
         {
            "id":9,
            "parent_id":"2",
            "name":"Luke"
         }
      ]
   }
]

我可以像这样用 axios 获取后显示它：

    George has 2 children:
        1. Glory
        2. Susan
    Robin has 1 child:
        1. Luke

现在我的目标是像这样显示它：

    Name   | parent's name 
    ~~~~~~~~~~~~~~~~~~~~~~~
    Glory  | George
    Susan  | George
    Luke   | Robin

有没有办法在vue js 或contoller、models 或其他任何地方实现它？

【问题讨论】：

标签： json laravel api vue.js axios

【解决方案1】：

我从这里得到了答案： Select from multiple tables with laravel fluent query builder

所以，我改变了这个：

return parent::with('children')->get();

到这里：

  return DB::table('parent')
        ->join('children', 'parent_id', '=', 'parent.id')
        ->get(array(
            'name',
            'parent_name'
        ));

但首先我将parent 表中的name 字段更改为parent_name

【讨论】：

【解决方案2】：

定义Children和Parent之间的反向关系，其中您将返回父模型以及每个孩子；然后在您的控制器中返回所有与他们的父母有非空父母的记录

return Model::where("parent_id", "<>", null)->with("parent")->get();

然后在您的 VueJS 应用程序中，您将获得所有子模型及其父模型的 JSON 响应。

【讨论】：

这些是我目前的关系：return $this->belongsTo('App\Models\parent', 'parent_id', 'id'); 和 return $this->hasMany('App\Models\children');。它给了我一个名为 parent 的新字段，所有值都是 NULL。
是parent 和children 定义的应用程序模型吗？
是的。如果删除父模型并将数据移动到子模型会更容易。但我不允许这样做。
我不确定我是否理解您的问题所在！删除父级并将数据移动到子级是什么意思？请注意，据我所知，您正在处理递归关系，因此使用具有递归关系的单个表会更有效。
这就是我的意思把父母变成孩子。删除父表，只使用一张表。