'how to loop append data correctly with ajax jquery?

my article look

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