如何在 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);
                }
            }
        }

此代码给我 1 个显示。 但在日志中它会返回我得到的尽可能多的数据。

例如，我有 50 个数据，我想将其显示在

谢谢

Answer 1

尝试这个。

    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

您可以使用字符串插值并连接所有生成的 p 标签来获取 p 标签内的所有数据。

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

你可以试试这个

 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);
                }
            }
        }