如何在 html 标签（如 p 或 div）中显示来自 ajax 的数据

Question

        url:'{{ route("dashboard.diklat_name") }}',
        data:{dari:dari, sampai:sampai},
        type: 'get',
        dataType: 'json',
        success:function(response) {
            var len = 0;
            len = response['data'].length;
            
            if (len > 0) {
                for (var index = 0; index < len; index++) {
                    document.getElementById('diklat_name').innerHTML = response['data'][index].name;
                    console.log(response['data'][index].name);
                }
            }
        }

this code give me 1 display. but in log it's return as many data that i get.

for example i have 50 data and i want to display it in

thanks

Answer 1

Try this.

    url:'{{ route("dashboard.diklat_name") }}',
        data:{dari:dari, sampai:sampai},
        type: 'get',
        dataType: 'json',
        success:function(response) {
            var len = 0;
            len = response['data'].length;
            
            if (len > 0) {
                let data = '';
                response['data'].forEach((item) => {
                   data += "<p>" + item.name + "</p>";
                   console.log(item.name);
                )}
                document.getElementById('diklat_name').innerHTML = data;
            }
        }

Answer 2

You can get all the data inside p tag using string interpolation and concating all the resulting p tags.

let allNamesElement = '';
for (var index = 0; index < len; index++) {
     allNamesElement += `<p>${response['data'][index].name}</p>`;
     console.log(response['data'][index].name);
}

document.getElementById('diklat_name').innerHTML = allNamesElement;

Answer 3

You can try this

 url:'{{ route("dashboard.diklat_name") }}',
        data:{dari:dari, sampai:sampai},
        type: 'get',
        dataType: 'json',
        success:function(response) {
            var len = 0;
            len = response['data'].length;
            let html =  document.getElementById('diklat_name').innerHTML;
            if (len > 0) {
                for (var index = 0; index < len; index++) {
                  html  += response['data'][index].name;
                    console.log(response['data'][index].name);
                }
            }
        }