javascript - jQuery AJAX - $.each 使用正确的数据重复 html 结构？

Question

我在 Laravel 中创建了一个返回包列表的 API。在我的主项目中，我通过执行 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 次。我怎样才能做到这一点？

如果这在 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") 中，您需要输入父元素的 id/class