Looking at you code, looks like you’re sending the last record every request.

I do not recommend to send an ajax request for each row. But if you have to do it, try this:

function getRecords() {
  var records  = [];
  var keyNames = ['firstName', 'surname'];

  $("#wrapper tbody tr").each(function(i) {

    if (i === 0) { 
       return;
    }

    var record = {};
    $('td', this).each(function(j) {
        if (keyNames[j]){
          var text = $.trim($(this).text()); // GET TRIMMED TEXT
          record[keyNames[j]] = text;
        }
    });

    records.push(record);
  });

  return records;
}

function sendRequest() {
  var records = getRecords();
  console.log(records);
  //ajax call to server to add to database
}

sendRequest();

I highly recommend you to send more than one item per time.

I am loading members into a database from a table (the table has been populated from an MS Excel spreadsheet so contains fixed columns and variable rows). The ajax call to write the second row has data from the first row. However, when I add the “alert” the data on each ajax call is correct. How do I ensure that all the data from parsing the row has been retrieved before the ajax call?

    var firstName = '';
    var surname = '';
    $("#wrapper tbody tr").each(function() {
        var row = $(this).index() + 1; // +1 since index is 0 based
        $('td', this).each(function() {
            if (row > 1) {
                var $col = $(this);
                var col = $col.index() + 1;
                var text = $.trim($col.text()); // GET TRIMMED TEXT

                if (col === 1){
                    firstName = text;
                }
                if (col === 2){
                    surname = text;
                }
            }
        });
        if (row > 1) {
            alert("firstName: " + firstName + " surname: " + surname);

            //ajax call to server to add to database

        row++;
    });

This is what I have amended the above to:

function sendRequest() {
//Get the default image
    var img2 = '';
    toDataURL('images/YouthMember.jpg', function(dataUrl) {
        img2 = dataUrl.replace(/^data:image/(png|jpg|jpeg|gif);base64,/, "");
    })

    var records = getRecords();
    console.log("Records: " + records);
    var jsonRecords = JSON.stringify(records);

    //ajax call to server to add to database
    $.ajax({
        url : 'BulkUploadMembersView', // Your Servlet mapping or JSP(not suggested)
        type : 'POST',
        dataType : 'json',
        data : {
            ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
            ssAccountID : sessionStorage.getItem('ssAccountID'),
            ssGroupNoAdd : sessionStorage.getItem('ssGroupNoAdd'),

            image : img2,
            memberList: jsonRecords,
        },

        })
        .fail (function(jqXHR, textStatus, errorThrown) {
            //alert(jqXHR.responseText);
            $('#ajaxGetUserServletResponse3').text('Error adding member.');
        })
        .done(function(responseJson){
            $('#ajaxGetUserServletResponse3').text('Member added.');
            showActionPlanDataTable();
    })
}

function getRecords() {
    var records  = [];
    var keyNames = ['firstName', 'surname', 'dob', 'scoutNumber', 'joiningDate'];

    $("#wrapper tbody tr").each(function(i) {

        if (i === 0) {
            i++
            return;
        }

        var record = {};
        $('td', this).each(function(j) {
            if (keyNames[j]){
                var text = $.trim($(this).text()); // GET TRIMMED TEXT

                record[keyNames[j]] = text;
            }
        });
        records.push(record);
    });

    return records;
}