如何在jQuery AJAX回调中遍历对象数组？解决数据undefined问题

我在jQuery AJAX请求的成功回调里遍历API响应数据时，所有元素都显示undefined。我需要根据API返回的data数组长度，遍历每个对象的name、imageLink和date字段，生成格式为「文件名：xxx，图片链接：xxx，日期：xxx」的重复div容器。自己在AJAX遍历这块经验不足，折腾很久没解决，求帮忙指出代码错误。

API响应示例 #

{
  "status": true,
  "timestamp": "2023-04-25T13:16:41:799",
  "message": "Success",
  "data": [
    {
      "name": "30_AADHAR_1.jpg",
      "imageLink": "https://s3.ap-south-1.amazonaws.com/kbe-test-crops/Sula/KBE/kyc/identity/30_AADHAR_1.jpg",
      "date": "2023-04-24T09:52:51.000+00:00"
    },
    {
      "name": "30_AADHAR_2.jpg",
      "imageLink": "https://s3.ap-south-1.amazonaws.com/kbe-test-crops/Sula/KBE/kyc/identity/30_AADHAR_2.jpg",
      "date": "2023-04-24T10:18:01.000+00:00"
    },
    {
      "name": "30_AADHAR_3.jpg",
      "imageLink": "https://s3.ap-south-1.amazonaws.com/kbe-test-crops/Sula/KBE/kyc/identity/30_AADHAR_3.jpg",
      "date": "2023-04-24T10:34:16.000+00:00"
    },
    {
      "name": "30_AADHAR_4.jpg",
      "imageLink": "https://s3.ap-south-1.amazonaws.com/kbe-test-crops/Sula/KBE/kyc/identity/30_AADHAR_4.jpg",
      "date": "2023-04-24T11:05:07.000+00:00"
    },
    {
      "name": "30_AADHAR_5.jpg",
      "imageLink": "https://s3.ap-south-1.amazonaws.com/kbe-test-crops/Sula/KBE/kyc/identity/30_AADHAR_5.jpg",
      "date": "2023-04-24T13:00:12.000+00:00"
    }
  ]
}

我的JS代码 #

function ApplicationForm(){
            
    var person = document.getElementById("personIdenty").value;
    var appfile = document.getElementById("applicationfm").value;
    var baseUrl = document.getElementById("bridge").value;
    var formData = new FormData();
       
    formData.append("documentCategory",appfile);
    formData.append("personId",person);
    $.ajax({
        url: baseUrl+"/storeFiles/farmerkycImages",
        
        "processData": false,
        "contentType": false,
        method: 'POST',
        dataType: 'json',
        data: formData, 
        
        success: function(response) {
            // var imgName = response.data.map(imgName => { return imgName.name });
            //console.log(response);
            $.each(response, function(key, value) {
                var kycdocs = `<div class="row">
                    <div class="col-md-12">
                    <div class="row">
                    <div class="col-md-2"><span><strong>File Name :</strong> </span></div>
                    <div class="col-md-6"><span id="imgname">${response.data.name}</span></div>
                    </div>
                    
                    <div class="row">
                    <div class="col-md-2"><span><strong>Image Url :</strong> </span></div>
                    <div class="col-md-6"><a href="" id="img-link" target="_blank">${response.data.imageLink}</a></div>
                    </div>
                    
                    <div class="row">
                    <div class="col-md-2"><span><strong>Date : </strong> </span></div>
                    <div class="col-md-6"><span id="img-date">${response.data.date}</span></div>
                    </div>
                    </div>
                    </div>`;
                $('#myDiv').append(kycdocs);

            });
        },
      
    }); 

}

我的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.4.js"
        integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
</head>

<body>
<div id="myDiv"></div>


</body>
</html>

你的代码存在两个核心错误，还有两个细节问题：

核心错误 #

1. 遍历对象错误：你用$.each(response, ...)遍历的是整个响应对象（包含status、timestamp等字段），而不是真正需要的response.data数组。必须遍历response.data才能拿到每个文件对象。
2. 取值逻辑错误：response.data是数组，不是单个对象，你直接写response.data.name必然返回undefined。应该用遍历回调里的value（或自定义变量名，比如item）来访问当前遍历到的对象属性。

细节问题 #

• 重复使用唯一ID：生成的HTML里多次出现id="imgname"这类重复ID，ID是页面唯一标识，换成class更合理。
• 图片链接未赋值：a标签的href属性为空，需要设置为对应的imageLink值。

修正后的成功回调代码 #

success: function(response) {
    // 遍历response.data数组，而非整个response对象
    $.each(response.data, function(index, item) {
        var kycdocs = `<div class="row">
            <div class="col-md-12">
            <div class="row">
            <div class="col-md-2"><span><strong>文件名 :</strong> </span></div>
            <div class="col-md-6"><span class="imgname">${item.name}</span></div>
            </div>
            
            <div class="row">
            <div class="col-md-2"><span><strong>图片链接 :</strong> </span></div>
            <div class="col-md-6"><a href="${item.imageLink}" class="img-link" target="_blank">${item.imageLink}</a></div>
            </div>
            
            <div class="row">
            <div class="col-md-2"><span><strong>日期 : </strong> </span></div>
            <div class="col-md-6"><span class="img-date">${item.date}</span></div>
            </div>
            </div>
            </div>`;
        $('#myDiv').append(kycdocs);
    });
},

内容的提问来源于stack exchange，提问作者Chinni Ch