如何在 jQuery ajax 调用中迭代对象数组

Question

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 响应长度迭代每个对象名称、图像链接和日期 例如：名称：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>

Answer 1

你可能需要考虑用这样的东西改变你的 .each 电话

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

                             });
                              },
                        
                      }); 

                   }