javascript - jQuery AJAX - $.each 用正确的数据重复 html 结构?
问题描述
我在 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
解决方案
$.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
推荐阅读
- c - 我无法理解这个分段错误
- python-3.x - 为什么我收到“除了 ValueError”的语法错误
- ruby-on-rails - Button_to 带有类和按钮而不是输入类型提交
- javascript - 我想在上传到服务器 php mysql 之前将音频文件压缩到较小的大小
- shell - 如何根据每 100 个空行数拆分文件
- java - 如何删除白色背景以及如何添加棍子?
- java - 在 Android 的 Java 中使用 Microsoft Speech API 文本到语音?
- tensorflow - 二进制和多类分类代码更改
- javascript - 使用 jquery 根据 url 显示特定模式
- python - numpy where 在非排序数组上