Как получить данные из БД и вывести в модальном окне
 

Доброго дня всем.
Пытаюсь сделать карточку быстрого просмотра товара, как сделано тут - https://likadress.ru/
Повесил событие на кнопку

$(".element-view").on("click", function(){
        let id_product = $(this).attr("id_product");

            $.ajax({
                url: laroute.route('product.show', {id_product}),
                type: 'GET',
                dataType: "json",
                data:{id:id_product},
                success: function(response){
                    console.log("OK");
                    $(".modal_details").addClass("show-modal");
                },
                error: function (response) {
                    console.log("NO")
                }
            });
    });

В консоли получаю ответ ОК.
В контроллере написал (все это дело хочу реализовать на Laravel):

public function show($id)
    {

        $product = Product::find($id);
        return response()->json($product);
    }

Вопрос - как получить переменную в модальном окне и как потом вывести данные о товаре? Может кто ткое уже делал? Поделитесь опытом.
Спасибо.

Какую переменную? Вот это - return response()->json($product);, должно быть выводом в браузер, а данные из response получить, поместить в соответствующие элементы $(".modal_details"), который потом показать.

Может я неправильно выразился. Говоря о переменной, я и имел в виду $product.
Вот именно с этим у меня и трудности - как эти данные получить и показать? Файл достаточно большой, чтобы описывать его в скрипте

Никак, это переменная на сервере, а итогом обращения к методу show контроллера должен быть вывод в браузер. При этом если вывести в консоль на клиенте ответ сервера console.log(response), то это должен быть объект, если $product, это ассоциированный массив, либо массив, если если $product, это индексный массив. А далее данные этого массива нужно поместить на страницу. Например, панель "modal_details" имеет элемент с id "test", а $product содержит ключ "test", значение которого нужно поместить в этот элемент. Значит на клиенте нужно выполнить $('#test').text(response.test).

Вот так получая значения свойств объекта response (ключей $product) непосредственно или обходом в цикле и помещайте их в нужное. А что там у вас в $product/response, что из него во что помещать никто ведь не знает на форуме, поэтому конкретно никто ничего и не скажет.

Вывод console.log(response) показывает пустые скобки {}
Может я неправильно ajax-запрос написал?

Ну в самом запросе нет ошибок, а верен ли путь и данные запроса, этого я не знаю. Что касается {} в консоли, то это означает, что $product, то есть то что возвращено Product::find($id), является пустым объектом, то есть на клиент будет отдан json "{}". Причину искать нужно на сервере, либо не те параметры в запросе передает клиент.

URL неправильно написал. Теперь нормально, в консоли выдает

{"id":53,"title":"\u0411\u0440\u044e\u043a\u0438 LB 52-071","alias":"bruki-LB-52-071-","meta_title":"\u0411\u0440\u044e\u043a\u0438 LB 52-071","meta_description":"","meta_keywords":"","status":"","sizes":null,"price":560,"articul":"","category_id":7,"category_alias":"womans","created_at":null,"updated_at":null}

Но когда пишу

success: function (response) {
                    $(".modal_details h1").html(response.title);
                    $('.modal_details').addClass("show-modal");
                },

Опять что-то не так?

А что не так, панель появляется, а заголовок пуст? Я же не знаю всю html-структуру панели modal_details, как я могу знать что не так. Вероятно, что селектор ".modal_details h1" не верный.

Все получилось, данные выводятся, спасибо Вам за помощь.
Но теперь встала другая проблема - картинки к товару хранятся в другой таблице, связанной с первой. Я получил значения и отправил из контроллера две переменные так

return response()->json([$images, $product]);

В итоге получаю массив, в консоли это выглядит так:

(2) [{…}, Array(5)]
0: {id: 53, title: "Брюки LB 52-071", alias: "bruki-LB-52-071-", meta_title: "Брюки LB 52-071", meta_description: "", …}
1: Array(5)
0: {id: 1, img: "01.jpg", product_id: 53, created_at: null, updated_at: null}
1: {id: 2, img: "02.jpg", product_id: 53, created_at: null, updated_at: null}
2: {id: 3, img: "03.jpg", product_id: 53, created_at: null, updated_at: null}
3: {id: 4, img: "04.jpg", product_id: 53, created_at: null, updated_at: null}
4: {id: 5, img: "05.jpg", product_id: 53, created_at: null, updated_at: null}

Из первого массива получаю значения в срипте таким образом:

$(".product-title h1").text(response[0].title);
...

Все получается нормально. А вот с картинками беда - их нужно выводить в цикле. В шаблоне это выглядит так

<ul class="product-preview">
                                @foreach($product->image as $item)
                                    <li class="">
                                        <img src="{{ asset('img') }}/catalog/{{ $product->category_alias }}/{{ $item->img }}" alt="">
                                    </li>
                                @endforeach
                            </ul>

Как мне все это дело правильно написать в скрипте?

Спасибо.

Это РНР код, серверный, а это 0: {id: 1, img: "01.jpg", product_id: 53, created_at: null, updated_at: null}... JS объект. Вопрос - если шаблон уже выводит на странице изображения, то зачем получать объект с информацией о них? Или это иные изображения?

PS. Кстати, зачем у foreach "собака" (надеюсь знаете для чего она) если родитель (UL) выводится без проверки наличия изображений, а $product->image по идее либо пустой массив/объект должен быть, что не вызовет ошибки, либо null, что не мешало бы проверить до цикла?