How to merge 2 objects in Laravel and Vue.Js - laravel

Question

Im try to create a simple CRUD App in Laravel + Vue.JS (Vuex also)
And I have small problem
What is the problem actually
I have a table 'categories'
Structure of this table u can see on screenshot
And i have created 2 test rows
u can see on screenshot
How can I insert a title instead of a value parent_id
If parent_id has value like someone ids
Im try v-for in Vue Componetn and v-if
But i dont have any results
This is my code:
<tr v-for="(category, $index) in categories" :key="category.id">
<td>{{$index + 1}}</td>
<td>{{category.title}}</td>
<td v-if="category.parent_id === null">Category</td>
<td v-else>SubCategory</td>
<td>{{category.created_at | moment("DD, MMMM, YYYY")}}</td>
<td></td>
</tr>
This is my data what im get from Controller
Anyway thanks for help

Answer 1

This is code of controller
public function index()
{
$result = ['success' => true];
$category = Category::paginate(15);
$result['category'] = $category->items();
$result['pagination']['currentPage'] = $category->currentPage();
$result['pagination']['total'] = $category->total();
$result['pagination']['perPage'] = $category->perPage();
return response()->json($result, 200);
}
And here is how I want it to be
I think render function adn array processing must be at the Vue Component
This is my Category model code
public function products()
{
return $this->hasMany('App/Products');
}
public function parent()
{
return $this->hasOne(Category::class,'id','parent_id');
}

Answer 2

Solution will be to define relation hasOne like
public function parent()
{
return $this->hasOne(Category::class,'id','parent_id');
}
And then you can define resource, where you can claim parent's title using defined relation like below
$this->parent->title
Create you resource using command
php artisan make:resource CategoryResource
Then in your controller you should use resource
use App\Http\Resources\CategoryResource;
and within controller's action provide response like
$categories = Category::paginate(15);
return CategoryResource::collection($results); // instead of response()->json($categories , 200);
And example how your resource should look like
<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class CategoryResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* #param \Illuminate\Http\Request $request
* #return array
*/
public function toArray($request)
{
return [
'id' => $this->id,
'title' => $this->title,
'parent_id' => $this->parent_id,
'parent_title' => $this->parent->title,
...
];
}
}
Info about resources you can find https://laravel.com/docs/5.8/eloquent-resources