Laravel: Retrieving category name belonging to post instead of category_id

Question

I'm displaying all posts in database, each post belongs to ONE category and one category can have many posts, problem is when I print all posts data I can only access category_id field (since this is fk), however I want to display category name instead (name is another field of Category model).

I don't know how I could go to do this:

This is where I retrieve posts data (via GET AJAX call) and append posts data to table body:

 case "posts": $.ajax({ async: true, url: '/posts', type: 'GET', dataType: 'JSON', success: function (data) { console.log(data.posts); $('.row[data-link=' + linked_entry + ']').remove(); $.each(data.posts, function (index, item) { var posts_row = '<tr class="row" data-link="posts">'; posts_row += '<td>' + item.category_id + '</td>'; posts_row += '<td>' + item.title + '</td>'; posts_row += '<td>' + item.body + '</td>'; posts_row += '<td><div style="width:110px; height:60px; background-image:url(' + item.image + '); background-size:cover;"></div></td>'; posts_row += '<td style="text-align:center;"><input type="checkbox" class="entry_checkbox" data-link="posts" data-id="' + item.id + '" data-isVisible="' + item.isVisible + '" name="isVisible" '+(item.isVisible ? 'checked' : '')+'></td>'; posts_row += '</tr>'; $('.entry_table_container[data-link=' + linked_entry + ']').append(posts_row); }); }, error: function (data){ var errors = data.responseJSON; console.log(errors); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

This is where I retrieve all posts data (resource controller):

 public function index() { $posts = Post::all(); return response()->json([ 'success' => 'Todas las publicaciones recogidas', 'posts' => $posts, ]); } 

This is migration where I create posts and migrations:

 //CREATE CATEGORIES TABLE Schema::create('categories', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->boolean('isVisible')->default(true); $table->timestamps(); }); //FILL CATEGORIES TABLE WITH CATEGORIES DB::table('categories')->insert([ 'name' => 'Evento', ]); DB::table('categories')->insert([ 'name' => 'Oferta', ]); DB::table('categories')->insert([ 'name' => 'Notícia', ]); DB::table('categories')->insert([ 'name' => 'Artículo', ]); 

Models relationships:

Category:

 <?php namespace App; use Illuminate\\Database\\Eloquent\\Model; class Category extends Model { protected $table = 'categories'; protected $fillable = ['name', 'isVisible']; public function posts() { return $this->hasMany('App\\Post'); } } 

Post:

 namespace App; use Illuminate\\Database\\Eloquent\\Model; class Post extends Model { protected $table = 'posts'; protected $fillable = ['title', 'body', 'isVisible', 'image']; public function category() { return $this->hasOne('App\\Category'); } } 

Answer 1

You can include the category relation in your controller like this:

$posts = Post::with('category')->get();

Then you could retrieve it in your JavaScript like this:

item.category.name