ASP.NET Core项目Ajax拉取数据仅显示最后一条数据求助

问题原因 #

你遇到的核心问题是循环中重复覆盖了同一个DOM元素的内容。_getTaskTitle.innerText = ${value.TaskTitle}`` 这句代码在每次循环时都会替换掉之前的文本，最终只会保留最后一次赋值的内容；而控制台日志是逐条输出，所以能看到所有数据。

另外补充一个小优化：因为你设置了dataType: "json"，jQuery会自动将服务器返回的JSON响应解析为JavaScript对象，无需再调用jQuery.parseJSON(func)，直接使用func即可。

解决方案 #

根据不同的显示需求，提供两种常用处理方式：

场景1：每条任务标题单独显示（创建多个元素）

先修改HTML结构，准备一个容器承载所有任务标题：

<tr>
    <td class="border-bottom-0">
        <div id="taskTitleContainer" class="fw-semibold mb-1"></div>
    </td>
</tr>

再修改JavaScript代码，循环创建新元素并添加到容器中：

$("#btnGetTask").click(function () {
    $.ajax({
        contentType: "application/json",
        dataType: "json",
        type: "GET",
        url: "/TaskList/ListTask/",
        success: function (taskList) {
            // 先清空容器
            const taskContainer = document.getElementById("taskTitleContainer");
            taskContainer.innerHTML = "";
            
            // 循环生成每个任务标题元素
            $.each(taskList, (i, value) => {
                const titleElement = document.createElement("p");
                titleElement.innerText = value.TaskTitle;
                taskContainer.appendChild(titleElement);
                console.log(value.TaskTitle);
            });
        }
    });
});

场景2：所有任务标题拼接成单个文本显示

如果希望把所有标题放在同一个元素里，用分隔符连接：

$("#btnGetTask").click(function () {
    $.ajax({
        contentType: "application/json",
        dataType: "json",
        type: "GET",
        url: "/TaskList/ListTask/",
        success: function (taskList) {
            const _getTaskTitle = document.getElementById("getTaskTitle");
            // 用换行符拼接，可替换为", "实现逗号分隔
            const allTitles = taskList.map(item => item.TaskTitle).join("\n");
            _getTaskTitle.innerText = allTitles;
            
            $.each(taskList, (i, value) => {
                console.log(value.TaskTitle);
            });
        }
    });
});

内容的提问来源于stack exchange，提问作者Gökmen Ada