How to change the table content dynamically in html using js

I found a code here to change the table content dynamically

The script is in jQuery

Original jQuery code to change the table content dynamically

$(document).ready(function(e) {

    var data1 = [
        { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
        { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
        { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
        ];

    var data2 = [
        { field1: 'new value a1', field2: 'new value a2', field3: 'new value a3' },
        { field1: 'new value b1', field2: 'new value b2', field3: 'new value b3' },
        { field1: 'new value b1', field2: 'new value b2', field3: 'new value b3' },
        { field1: 'new value c1', field2: 'new value c2', field3: 'new value c3' }
        ];

    function loadTable(tableId, fields, data) {
        //$('#' + tableId).empty(); //not really necessary
        var rows = '';
        $.each(data, function(index, item) {
            var row = '<tr>';
            $.each(fields, function(index, field) {
                row += '<td>' + item[field+''] + '</td>';
            });
            rows += row + '<tr>';
        });
        $('#' + tableId + ' tbody').html(rows);
    }

    loadTable('data-table', ['field2', 'field1', 'field3'], data1);

    $('#btn-update').click(function(e) {
        loadTable('data-table', ['field2', 'field1', 'field3'], data2);
    });

});

I have a similar code but data content is

like

[
 { 'field1': 'value a1', 'field2': 'value a2', 'field3': 'value a3', 'field4': 'value a4' },
 { 'field1': 'value b1', 'field2': 'value b2', 'field3': 'value b3', 'field4': 'value b4' },
 { 'field1': 'value c1', 'field2': 'value c2', 'field3': 'value c3', 'field4': 'value c4' }
 ];

instead of

[
 { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
 { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
 { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
 ];

My code

function get_student_filters() {
    var selected_city = document.getElementById("student_city_selected").value;
    var selected_state = document.getElementById("student_state_selected").value;
    var selected_class = document.getElementById("student_class_selected").value;

    var selected_student_filter_data = {
        s_city:selected_city,
        s_state:selected_state,
        s_class:selected_class
    };
    $.ajax({
          type: "POST",
          contentType: "application/json;charset=utf-8",
          url: "http://127.0.0.1:5000/filter_student",
          traditional: "true",
          async:false,
          timeout: 40000,
          data: JSON.stringify({selected_student_filter_data}),
          dataType: "json",
          success: function(selected_student){

            var selected_student_data = JSON.stringify(selected_student)

            // Recevied data from the flask of the selected data from the table
            $(document).ready(function(selected_student_data) {

                // Function to fill the table
                    function loadTable(tableId, fields, data) {
                        // $('#' + tableId).empty(); //not really necessary
                        var rows = '';
                        $.each(data, function(index, item) {
                            var row = '<tr>';
                            $.each(fields, function(index, field) {
                                row += '<td>' + item[field+''] + '</td>';
                            });
                            rows += row + '<tr>';
                        });
                        $('#' + tableId + ' tbody').html(rows);
            // call function to populate the table
            loadTable('studetnt_table', ['rollno','name', 'state', 'city','class', 'age'], selected_student_data);
                    }
          }
          });
}

Nothing gets printed on the table

Two issues

1) Data that i received is not in the same syntax as in the snippet

2) I don't know if $(document).ready(function(selected_student_data)jQuery will work inside js script as i have written above

Could anyone please guide me here