How to iterate array of objects in jQuery ajax call

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

I want to iterate each object name , imageLink and date based on API response length for example: Name: aadhar , attachment:img link, date: today date like this format all div box's should repeated based on an array object length. anyone can please help me on it. I have spend more time already on it but I'm unable to achieve it.

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

You might need to consider changing your .each call with something like this

if(response.data != undefined){
    $.each(response.data, function(obj, indx) {
         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">${obj.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">${obj.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">${obj.date}</span></div>
            </div>
            </div>
            </div>`;
         $('#myDiv').append(kycdocs);
    
     });
}