print multi data using ajax

Question

I have more than one object on database I am trying to print them in html page using this AJAX function . but it print only the latest object on my page , however console.log(data) print all objects

    var serviceid = document.getElementById("services").value;
    $.ajax({
        url: 'http://localhost/easytrademarks/easytrademarks/getserviceshowdetails/'+ serviceid,
        dataType: 'json',
        type: 'GET',
        cache: false,
        async: true,
        success: function (data) {

            console.log(data);


            for (var i = 0; i < data.length; i++) {

                $('.timeline').html('<div class="row no-gutters justify-content-end justify-content-md-around align-items-start timeline-nodes"></div>');
                $('.no-gutters').html(' <div class="col-10 col-md-5 order-3 order-md-1 timeline-content"></div>');
                $('.timeline-content').append('<h3>' + data[i].title + '</h3>');
                $('.timeline-content').append('<p>' + data[i].content + '</p>');
                $('.timeline-content').append('<a>' + data[i].detail_url + '</a>');
                $('.no-gutters').append(' <div class="col-2 col-sm-1 px-md-3 order-2 timeline-image text-md-center"></div>');
                $('.timeline-image').append('<p>' + i + '</p>');
                $('.no-gutters').append('<div class="col-10 col-md-5 order-1 order-md-3 py-3 timeline-date"></div>');
            }

        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
            alert(errorThrown);
        }
    })

console.log(data)

(3) [{…}, {…}, {…}]
0: {id: 1, service_id: 1, title: "step one", content: "step one dsecription", detail_url: "www.google.com", …}
1: {id: 3, service_id: 1, title: "test", content: "dzcdzxv. adzf dazxf vdaz xvd", detail_url: "www.yputub.com", …}
2: {id: 4, service_id: 1, title: "dfdjhfdj", content: "hjxcvhdkzjxvhajk", detail_url: "www.dfdfd.d", …}
length: 3
__proto__: Array(0)

i think your passing *serviceid* thats why its return only one document, your fetching only one record i guess check the api first — R.G.Krish, Jul 25 '20 at 17:11
@Kitta No it has more than one document , i can print them on console.log() — Andrew Nady, Jul 25 '20 at 17:13
Put `console.log(data.length);` right after `console.log(data);` and see what the length is... — Rob Moll, Jul 25 '20 at 17:21
Please edit the question to include the html that corresponds to the for loop and the console output of `data`. — Rob Moll, Jul 25 '20 at 17:32
This is because you have use `.html()` inside for loop instead of `append` so currently it's erasing previous data inside your div and you are only able to see last result. Check [this](https://stackoverflow.com/questions/3015335/jquery-html-vs-append) for more information. — Swati, Jul 25 '20 at 17:34

print multi data using ajax

0 Answers0