'how to loop append data correctly with ajax jquery?
i have article like this. i try to using ajax for the future blog. 2 image at the top is using blade and 2 image in bottom i get the data with ajax.
can u tell me how to loop and append the data correctly ?
this is my blade code
<div class="owl-carousel owl-theme carousel_4" id="zona-artikel">
<!--ZONA ARTIKEL-->
<?php $i = 150; ?>
@foreach ($artikels as $item)
<div class="item" data-aos="fade-right" data-aos-delay="{{ $i }}">
<div class="strip">
<figure>
<img src="{{ asset('img_thumbnail/' . $item->thumbnail) }}"
data-src="{{ asset('img_thumbnail/' . $item->thumbnail) }}" class="owl-lazy"
alt="" width="460" height="310">
<a href="/post/contoh" class="strip_info"></a>
</figure>
</div>
</div>
<?php $i++; ?>
@endforeach
</div>
this is my ajax
@section('script')
<script>
$(document).ready(function() {
$.ajax({
url: '/',
dataType: 'json',
delay: 250,
success: function(response) {
console.log(response.artikel);
return {
results: $.map(response.artikel, function(item) {
$("#zona-artikel").prepend(
'<div class="item" data-aos="fade-right" data-aos-delay="150"><div class="strip"><figure><img src="img_thumbnail/' +
item.thumbnail + '" data-src="img_thumbnail/' + item
.thumbnail +
'" class="owl-lazy"alt="" width="460" height="310"><a href="/post/contoh" class="strip_info"></a></figure></div></div>'
);
})
};
},
cache: true
})
})
</script>
@endsection
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

