如何使用axois显示与产品类别相关的产品

Question

我已经展示了所有产品，现在我想展示与该类别相关的产品。在我的投资组合中，如果单击此类别，我会列出一个类别，我想查看与此类别相关的产品。我只是在学习laravel可以帮助我。.

控制器：

public function index($slug)
{
        $category_id = ProductCategory::where('slug', $slug)->first()->id;
    
        $data = [
    
            'productcategory' => ProductCategory::with('product')->where('parent_id', $category_id)->get(),
    
        ];
    
        return view('wallpapers', $data);
    }
    
    public function store(Request $request)
    {
        $products = Product::with('productColorGallary')->where('status', 1)->get();
       
        $data = [
 
            'product' => $products
   
        ];
    
        return response()->json($data, 200);
    }

产品型号：

class Product extends Model
{

    protected $table = "products";
    protected $guarded = ['id'];

    public function productColorGallary()
    {
        return $this->hasOne('App\ProductColorGallary', 'product_id', 'id');
    }

    public function productCategory()
    {
        return $this->belongsToMany('App\ProductCategory', 'product_category', 'product_id', 'mf_product_category_id');
    }


}

ProductCategory模型：

class ProductCategory extends Model
{
    protected $table = "mf_product_categories";
    protected $guarded = ['id'];
    public function product()
    {
        return $this->belongsToMany('App\Product', 'product_category', 'mf_product_category_id', 'product_id');
    }
}

HTML视图标记：

<ul class='visible-links nav nav-tabs' role="tablist">
      @foreach($productcategory   as   $productcategories)
      <li >
        <a class="tab-a active-a" data-id="tab1" data-toggle="tab" id="productcategory" href="{{$productcategories->id}}" role="tab" href="#1a" data-toggle="tab">{{$productcategories->name}}
        </a>
      </li>
      @endforeach
    </ul>
    <ul class='hidden-links hidden'>
    </ul>
  </nav>
  <div class="tab-content">
    <div  class="tab tab-active" data-id="tab1">
      <div class="row" id="product">

      </div>
    </div>
    <!--end of tab one-->

jQuery脚本：

$("#productcategory").click(()=>{

let url = "{{route('products.store')}}";
let path = '{{config('wall_master_furishing.file_url')}}';
axios.get(url, {
params:{
    productcategory: $("#productcategory").val(),
}
}).then((res)=>{
let product =res.data.product;
// console.log(product);
product.forEach(element => {
$('#product').append(
`
<div class="col-md-4 col-sm-6 col-6">
  <div class="wallprodCard">
    <div class="prodcardImage">
      <img src="${path}${element.product_color_gallary.featured_image}" alt="">
      <a class="prodcardFancy" href="${path}${element.product_color_gallary.featured_image}" data-fancybox="images" data-caption="Flooring">
        <i class="fa fa-search-plus">
        </i>
      </a>
    </div>
    <div class="prodcardDescp">
      <a href="{{url('')}}/wallpaper-details">
        <h4 class="prodcardtitle">${element.name}
        </h4>
      </a>
      <p class="text">${element.description}
      </p>
    </div>
  </div>
</div>
`);
});

});