I am trying to iterate API response in jQuery ajax call but I'm getting undefined data for all elements. how to iterate an array of objects in jQuery. I'm new to iteration in api ajax call

我想根据API响应长度迭代每个对象名称、imageLink和日期，例如：姓名：aadhar，附件：img链接，日期：今天的日期像这样的格式所有的div框的应重复的基础上一个数组对象的长度。任何人都可以帮助我。我已经花了更多的时间，但我无法实现它。

request: if possible please show me in Jsfiddle and let me know where I did wrong

 
 
 <script>
// this is my api response.
{
  "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"
    }
  ]
}
</script>

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

                             });
                              },
                        
                      }); 

                   }
     <!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>