Нужно руководство о том, как заполнить DIV с помощью запроса Ajax на стороне сервера, а затем повторить с @foreach. В настоящее время появляется ошибка «неопределенная переменная»

Question

В проекте Laravel я пытаюсь использовать Ajax для заполнения DIV и затем использовать @foreach для заполнения галереи магазина. По возможности я хотел использовать стратегию генерации контента на стороне сервера. Однако происходит что-то глупое, что я не могу понять - я получаю следующую ошибку:

$user_query is undefined
Make the variable optional in the blade template. Replace {{ $user_query }} with {{ $user_query ?? '' }}

Как это (@foreach ($ user_query as $ item)) предположить построено в блейде?

маршруты

    Route::get('/ajaxStoreRequest', 'StoreController@ajaxStoreRequest');
    Route::post('/ajaxStoreRequest/post', 'StoreController@ajaxStoreRequestPost');

Вот StoreController. php:

<?php

namespace App\Http\Controllers;

use App\Coin;
use Illuminate\Http\Request;
use App\DataTables\StoresDataTable;
use App\DataTables\StoresDataTableEditor;
use Illuminate\Support\Facades\DB;

class StoreController extends Controller
{
    public function ajaxStoreRequest()
    {
        return view('store.index');
    }

    public function ajaxStoreRequestPost(Request $request)
    {
        $user_query= DB::table('coins')
            ->select('id','year', 'mint', 'series', 'rating', 'rating_group','photo_link1', 'for_sale_price')
            ->where('for_sale', '=', 1)
            ->where('sold', '=', 0)
            ->where('series', '=', $request->series)
            ->where('year', '=', $request->year)
            ->where('mint', '=', $request->mint)
            ->where('rating_group', '=', $request->rating_group)
            ->get();

        return response()->json($user_query);
    }

}

DD ($ user_query); показывает следующий формат массива

Illuminate\Support\Collection {#552
  #items: array:1 [
    0 => {#555
      +"id": 2
      +"year": 1878
      +"mint": "Philadelphia"
      +"series": "Morgan Dollar"
      +"rating": "Ungraded"
      +"rating_group": "PCGS"
      +"photo_link1": "editor/20200328_002220_888888966_732020162248388.jpg"
      +"for_sale_price": "44"
    }
  ]
}

Вот скрипт Ajax из нижней части store / index.blade. php

    <script type="text/javascript">

        $.ajaxSetup({
            beforeSend: function(xhr, type) {
                if (!type.crossDomain) {
                    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
                }
            },
        });

        $(".btn-submit").click(function(e){
            e.preventDefault();
            var series = $("#series option:selected").val();
            var year = $("input[name=year]").val();
            var mint = $("#mint option:selected").val();
            var rating_group = $("#rating_group option:selected").val();
            var price_filter = $("input[name=price_filter]:checked").val();

            $.ajax({
                type:'POST',
                url:'/ajaxStoreRequest/post',
                data:{series:series, year:year, mint:mint, rating_group:rating_group, price_filter:price_filter},
                success:function(result){
                    $('.collapse').collapse('show');
                    $('#user_query').html(result);
                }
            });
        });
    </script>

Здесь HTML дальше в магазине / index.blade. php

<div class="row row-deck js-gallery collapse">
    <div class="user_query" id="user_query">
    @foreach ($user_query as $item)                                  <!-- THIS IS THE ERROR -->
        <div class="col-md-6 col-xl-4">
            <div class="block">
                <div class="options-container">
                    @if ($item->photo_link1)
                        <img class="img-fluid options-item" src="storage/{{$item->photo_link1}}" style="width:300px; height:300px" alt="">
                    @else
                        <img class="img-fluid options-item" src="images/no-user-profile-picture-1200x900.jpg" style="width:300px; height:300px" alt="">
                    @endif
                    <div class="options-overlay bg-black-75">
                        <div class="options-overlay-content">                       
                            <a class="btn btn-sm btn-primary img-lightbox" href="gallery/{{$item->id}}">
                                View
                            </a>
                            <a class="btn btn-sm btn-light" href="javascript:void(0)">
                                <i class="fa fa-plus text-success mr-1"></i> Add to cart
                            </a>
                        </div>
                    </div>
                </div>
                <div class="block-content">
                    <div class="mb-2">
                        <div class="h4 font-w600 text-success float-right ml-1">${{$item->for_sale_price}}</div>
                        <a class="h4" href="be_pages_ecom_store_product.html">{{$item->year}}-{{$item->mint}}</a>
                    </div>
                    <p class="font-size-sm text-muted">{{$item->series}} ({{$item->rating}} {{$item->rating_group}})</p>
                </div>
            </div>
        </div>
    @endforeach
    </div>
</div>

Answer 1

Я пытаюсь использовать Ajax для заполнения DIV, а затем использовать @ foreach

Это в корне наоборот. store/index.blade.php отображается на стороне сервера, поэтому любые данные, возвращаемые из вашего вызова ajax, должны быть добавлены в DOM с помощью JavaScript.