How to populate the category data in articles in laravel

Question

Category Model

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Article;

class Category extends Model
{
    protected $table = 'categories';
    public $timestamps = false;

    public function articles () {
        return $this->hasMany(Article::class);
    }
}

Article Model

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Category;
use App\User;

class Article extends Model
{
    protected $table = 'articles';

    public function category ()
    {
        return $this->belongsTo(Category::class);
    }

    public function user () {
        return $this->belongsTo(User::class);
    }

}

Articles Table Migration

Schema::create('articles', function (Blueprint $table) {
          $table->increments('id');
          $table->string('title');
          $table->integer('category_id')->nullable()->unsigned();
          $table->integer('user_id')->unsigned();
          $table->longText('body');
          $table->timestamps();
        });

Categories Table Migration

Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
        });

Below is the controller function that used to list articles

public function index()
  {
    return Article::simplePaginate();
  }

Screenshot

Please see the above screenshot.

View Page

<template>
    <section>
        <div class="btn-group" style="margin: 10px auto;">
          <router-link to="/articles/new" class="button"><i class="fa fa-plus" style="margin-right: 10px"></i>New</router-link>
          <button class="button is-primary" id="prev" @click="prev_page" :disabled="prev == null">Prev</button>
          <button class="button is-primary" id="next" @click="next_page" :disabled="next == null">Next</button>
          <button class="button is-danger" id="del" @click="delete_posts">
          <i class="fa fa-trash" style="margin-right: 10px"></i>
          Delete</button>
        </div>
        <b-field>
          <b-input placeholder="search posts" type="search" icon-pack="fa"  icon="search"></b-input>
        </b-field>
        <b-table
          :data="articles"
          :checked-rows.sync="checkedRows"
          checkable >
          <template slot-scope="props">
              <b-table-column label="Title" centered>
                 <b-tooltip label="click to edit" position="is-top">
                    <a :href="'/admin/articles/' + props.row.id + '/edit'">{{ props.row.title }}</a>
                </b-tooltip>

              </b-table-column>

              <b-table-column label="Author" centered>
                  {{ props.row.user_id }}
              </b-table-column>

              <b-table-column label="Category" centered>
                  {{ props.row.category_id }}
              </b-table-column>

              <b-table-column label="Date" centered>
                  {{ new Date(props.row.updated_at).toLocaleDateString() }}
              </b-table-column>
          </template>
      </b-table>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                articles: [],
                checkedRows: [],
                prev: null,
                next: null
            }
        },
        methods: {
          fetchArticles (url) {
            let _this = this
            this.$http.get(url)
              .then(res => {
                _this.articles = res.body.data
              })
          },
          prev_page () {
            this.fetchArticles(this.prev)
          },
          next_page () {
            this.fetchArticles(this.next)
          },
          delete_posts () {
            let _this = this
            let id = '';
            for(let i = 0; i < this.checkedRows.length; i++) {
              id += this.checkedRows[i].id + ','
            }
            let url = '/api/articles/delete?id=' + id
            this.$http.get(url)
              .then( () => {
                _this.fetchArticles('/api/articles')
                _this.checkedRows = []
              })
          }
        },
        created () {
          this.fetchArticles('/api/articles')
        },
    }
</script>

In the above screenshot, in the place of author column need the category name.

How to get the category data in place of category_id.

Sohel0415 Sohel0415 · Accepted Answer · 2018-01-15T06:01:41

use relationship. You need to eagerload your category record.

return Article::with('category')->simplePaginate();

How to populate the category data in articles in laravel

1 Answers