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 and Convert json data to a html table and display array of objects in a dynamic table javascript — adiga
– adiga, Commented Feb 24, 2019 at 7:47
for (a in d['data']) has a different meaning in javascript than in Python. See developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… . 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
– Alex Hall, Commented Feb 24, 2019 at 8:10

balderman · Accepted Answer · 2019-02-24 09:19:37Z

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:'[email protected]'},
        {id:14,user:'dan',email:'[email protected]'}]

		
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>

Collectives™ on Stack Overflow

How To append AJAX JSON array response in html table dynamically

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related