jQuery AJAX - $. Каждый повтор html структура с правильными данными?

Question

Я создал API в laravel, который возвращает список пакетов. В моем основном проекте я получаю этот список с помощью вызова AJAX, который затем возвращает список объектов. Все это работает как задумано, но я хочу отобразить значения объектов в структуре html на моей странице и не совсем знаю, как это сделать.

Я получаю данные, выполнив этот вызов ajax

$.ajax({
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'X-Requested-With': 'XMLHttpRequest'},
    url: 'https://www.rainierlaansite.test/api/packages/get',
    type: 'GET',
    data: {},
    success: function(data) {
        $('#package-loading').fadeOut();
        $.each(data, function(index, value) {
            console.log(index);
            console.log(value)
        });
    },
    error: function(e) {
        $('#package-error').fadeIn().text("Unfortunately there was an error retrieving the packages");
    }
});

Возвращает объект со следующими данными:

id: 1
name: "rainieren/visitors"
description: "The Laravel Framework."
subscription_id: 1
price: 0.99
composer_package: "rainieren/visitors"
downloaded: 8
created_at: "2020-01-28 21:48:39"
updated_at: "2020-01-28 21:48:39"

И для каждого возвращаемого объекта я хочу отобразить эту структуру HTML с соответствующими данными:

<div class="row">
<div class="row">
    <div class="col-2">
        foto
    </div>
    <div class="col-6">
        <a href=""><h6 class="m-0">Titel van package</h6></a>
        <p class="m-0 sub-text">Omschrijving</p>
    </div>
    <div class="col-4 d-flex justify-content-end align-items-center">
        <a href="" class="badge badge-pill badge-light" style="font-size: 14px;">$0.99</a>
    </div>
</div>
<hr>

Чтобы уточнить, если вызов API возвращает 5 объектов. Я хочу, чтобы структура HTML повторялась 5 раз со всеми правильными данными из этих объектов. Как я могу выполнить sh это?

Если это будет сделано в Laravel, это будет выглядеть примерно так:

@foreach($objects as $object)
    <div class="row">
        <div class="col-2">
            foto
        </div>
        <div class="col-6">
            <a href=""><h6 class="m-0">{{ $object->title }}</h6></a>
            <p class="m-0 sub-text">{{ $object->description }}</p>
        </div>
        <div class="col-4 d-flex justify-content-end align-items-center">
            <a href="" class="badge badge-pill badge-light" style="font-size: 14px;">{{ $object->price }}</a>
        </div>
    </div>
    <hr>
@endforeach

Answer 1

$.ajax({
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'X-Requested-With': 'XMLHttpRequest' },
    url: 'https://www.rainierlaansite.test/api/packages/get',
    type: 'GET',
    data: {},
    success: function (data) {
        $('#package-loading').fadeOut();
        let target = $("#yourWrapper")
        $.each(data, function (index, value) {
            var el = data[index];

            target.append(
                '<div class="row" data-id='+ el.id +'>' +
                    '<div class="col-2"> foto </div>' +
                    '<div class="col-6">' +
                        '<a href=""><h6 class="m-0">'+ el.name +'</h6></a>' +
                        '<p class="m-0 sub-text">'+ el.description +'</p>' +
                    '</div>' +
                    '<div class="col-4 d-flex justify-content-end align-items-center">' +
                        '<a href="" class="badge badge-pill badge-light" style="font-size: 14px;">$'+ el.price +'</a>' +
                    '</div>' +
                '</div>')
        });
    },
    error: function (e) {
        $('#package-error').fadeIn().text("Unfortunately there was an error retrieving the packages");
    }
});

в let target = $("#yourWrapper") необходимо указать идентификатор / класс родительского элемента