How To append AJAX JSON array response in html table dynamically

Question

Hi I am submitting a html form using ajax and I am receiving a JSON Array response in return. So can you please suggest me how can I append this response in html table dynamically.

this is my form :

 <form id="myForm" method="POST">
   <input type="submit" value="Refresh">
 </form>

Python Django Backed Code:

def refresh(request):
    user = usertab.objects.all().values()
    d={"data" : list(user)}
    return JsonResponse(d)

And here I am calling my BE code using Ajax :

 $(document).on('submit','#myForm',function(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url: '/refresh/',
            data:{
                csrfmiddlewaretoken : "{{ csrf_token }}"
            },
            success: function(d){
                for (a in d['data']){
                  //How to append data in html table
                }

            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });

This is my html table :

<table id="myTable">
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> ??????? </td>
            <td> ??????? </td>
        </tr>
    </tbody>

</table>

Possible duplicate of [Dynamically generated table - using an array to fill in TD values](https://stackoverflow.com/questions/20407781/dynamically-generated-table-using-an-array-to-fill-in-td-values) and [Convert json data to a html table](https://stackoverflow.com/questions/5180382) and [display array of objects in a dynamic table javascript](https://stackoverflow.com/questions/29335369) — adiga, Feb 24 '19 at 07:47
`for (a in d['data'])` has a different meaning in javascript than in Python. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement . I would suggest using `forEach` most of the time, especially because js has lots of callbacks and defining a callback in a traditional loop will lead to bugs. In this case you could write `d['data'].forEach(alert)`. — Alex Hall, Feb 24 '19 at 08:10

score 0 · Answer 1 · answered Feb 24 '19 at 09:19

See demo of dynamic table rows generation.
Note that the code is not using any external js library.

<html>
<head>

<script>

var data = [{id:12,user:'jack',email:'jack@zzz.com'},
        {id:14,user:'dan',email:'dan@zzz.com'}]

  
function populate_table() {
   let table = document.getElementById('demo_table');
   for(var i = 0; i < data.length; i++) {
        let row = table.insertRow(-1);
  let cell = row.insertCell(0);
  let text = document.createTextNode(data[i].email);
        cell.appendChild(text);
  cell = row.insertCell(0);
  text = document.createTextNode(data[i].user);
        cell.appendChild(text);
  cell = row.insertCell(0)
  text = document.createTextNode(data[i].id);
        cell.appendChild(text);
   }
}

</script>
</head>
<button onclick="populate_table()">Populate table</button>

<table id="demo_table">
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

</html>

How To append AJAX JSON array response in html table dynamically

1 Answers1