title: how to display json response data from controller in blade page in laravel using ajax?
body: <p>i have data returned from conntroller by ajax response in json format and I can print data in console.
  but I want to display it in a table, how can I display it?
  i made a search for solution but all solution write HTML code in controller function and return it as response, so is there any other solution</p>
  <p>my controller</p>
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers\backend;
  
  use App\Http\Controllers\Controller;
  use Illuminate\Http\Request;
  
  use App\Category;
  
  class CategoryCtrl extends Controller
  {
      //function search - show categories live search
      public function index(Request $request)
      {
          if($request-&gt;ajax())
          {
              $categories = Category::where('name','LIKE','%'.$request-&gt;cat_search.&quot;%&quot;)-&gt;orderBY('created_at','DESC')-&gt;get();
              return Response()-&gt;json($categories);
          }
          else {
              $categories = Category::orderBY('created_at','DESC')-&gt;get();
              return view('backend.category.list')-&gt;withcategories($categories);
          }
      }
  
  }
  
  </code></pre>
  <p>view</p>
  <pre><code>@extends('backend.layouts.app')
  
  @section('content')
  
      &lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;search&quot; id=&quot;cat_search&quot; placeholder=&quot;Category Search...&quot; /&gt;
                     
      &lt;table id=&quot;CategoriesTable&quot; class=&quot;table table-striped table-vcenter js-dataTable-simple&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                 &lt;th class=&quot;text-center w-5&quot;&gt;#&lt;/th&gt;
                 &lt;th class=&quot;text-center&quot;&gt;Name&lt;/th&gt;
                 &lt;th class=&quot;text-center hidden-xs&quot;&gt;Icon&lt;/th&gt;
                 &lt;th class=&quot;text-center hidden-xs&quot;&gt;Order&lt;/th&gt;
                 &lt;th class=&quot;text-center w-15&quot;&gt;Status&lt;/th&gt;
                 &lt;th class=&quot;text-center&quot;&gt;Created At&lt;/th&gt;
                 &lt;th class=&quot;text-center&quot;&gt;Last Update&lt;/th&gt;
                 &lt;th class=&quot;text-center&quot; style=&quot;width: 15%;&quot;&gt;Actions&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
                      @foreach ($categories as $key=&gt;$category)
                          &lt;tr&gt;
                              &lt;td class=&quot;text-center&quot;&gt;{{ $key+1 }}&lt;/td&gt;
                              &lt;td class=&quot;text-center text-capitalize&quot;&gt;{{ $category-&gt;name }}&lt;/td&gt;
                              &lt;td class=&quot;text-center hidden-xs&quot;&gt;&lt;i class=&quot;{{ $category-&gt;icon }} fa-lg&quot;&gt;&lt;/i&gt;&lt;/td&gt;
                              &lt;td class=&quot;text-center hidden-xs&quot;&gt;{{ $category-&gt;order }}&lt;/td&gt;
                              &lt;td class=&quot;text-center text-capitalize&quot;&gt; 
                                  &lt;span class=&quot;btn btn-sm btn-pill @if($category-&gt;status == 'active') btn-primary @else btn-warning @endif&quot;&gt;{{ $category-&gt;status }}&lt;/span&gt; 
                              &lt;/td&gt;
                              &lt;td class=&quot;text-center&quot;&gt;{{ $category-&gt;created_at-&gt;format(&quot;Y-m-d g:i a&quot;) }}&lt;/td&gt;
                              &lt;td class=&quot;text-center&quot;&gt;{{ $category-&gt;updated_at-&gt;format(&quot;Y-m-d g:i a&quot;) }}&lt;/td&gt;
                              &lt;td class=&quot;text-center&quot;&gt;
                                  &lt;div class=&quot;btn-group&quot;&gt;
                                      &lt;a href=&quot;{{ route('category.edit', ['id' =&gt; $category-&gt;id]) }}&quot; class=&quot;btn btn-success&quot;&gt;Edit&lt;/a&gt;
                                      &lt;button class=&quot;btn btn-app&quot; data-toggle=&quot;modal&quot; data-target=&quot;#{{ $category-&gt;name.$category-&gt;id }}&quot;&gt;Delete&lt;/button&gt;
                                  &lt;/div&gt;
                                  &lt;!-- Modal --&gt;
                                  &lt;div class=&quot;modal fade&quot; id=&quot;{{ $category-&gt;name.$category-&gt;id }}&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-hidden=&quot;true&quot;&gt;
                                      &lt;div class=&quot;modal-dialog&quot;&gt;
                                          &lt;div class=&quot;modal-content&quot;&gt;
                                              &lt;div class=&quot;modal-card-header&quot;&gt;
                                                  &lt;div class=&quot;row&quot;&gt;
                                                      &lt;h4 class=&quot;col-md-10&quot;&gt;Delete Category&lt;/h4&gt;
                                                      &lt;ul class=&quot;card-actions col-md-2&quot;&gt;
                                                          &lt;li&gt;
                                                              &lt;button data-dismiss=&quot;modal&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;ion-close&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                                          &lt;/li&gt;
                                                      &lt;/ul&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class=&quot;card-block&quot;&gt;
                                                  &lt;p&gt;Are you sure, you want to delete category (&lt;span class=&quot;text-capitalize&quot;&gt;{{ $category-&gt;name }}&lt;/span&gt;) ?&lt;/p&gt;
                                                  &lt;p&gt;If you delete category, you will delete all category's products too.&lt;/p&gt;
                                                  &lt;p&gt;Notice: if you want to hide category, you can update it's status to not active instad of delete it.&lt;/p&gt;
                                              &lt;/div&gt;
                                              &lt;div class=&quot;modal-footer&quot;&gt;
                                                  &lt;button class=&quot;btn btn-default&quot; type=&quot;button&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                                                  {!! Form::Open(['url' =&gt; route('category.delete', ['id' =&gt; $category-&gt;id]) ]) !!}
                                                      &lt;button class=&quot;btn btn-app&quot; type=&quot;submit&quot; data-dismiss=&quot;modal&quot;&gt; Delete&lt;/button&gt;
                                                  {!! Form::Close() !!}
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;!-- End Modal --&gt;
  
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      @endforeach
                     
                  &lt;/tbody&gt;
              &lt;/table&gt;
      
  @endsection
  </code></pre>
  <p>ajax code</p>
  <pre><code>&lt;!--  Ajax code for category live search  --&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          $('#cat_search').on('keyup',function(){
              $value = $(this).val();
              $.ajax({
                  type : 'get',
                  url : '{{ route('category.index') }}',
                  data:{'cat_search':$value},
                  dataType: 'json',
                  success:function(response){
                      //console.log(response);
                  });
  
               });
          })
      &lt;/script&gt;
  </code></pre>