How To Print List Of JsonResponse Data in html

Question

hy i am creat a form and i am submit the form using ajax and i recive the list of data in my success ajax

this is my form :

 <form id="myForm" method="POST">

   <input type="submit" value="Refresh">
 </form>

this is my view function

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

and this is my 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']){
                alert(a)
                }

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

ia ma recive all user data in my success ajax and i want to print this data in table using for loop how i do that please tell me

i am apply for loop in dict but i am got alert in aray form 0 then 1 then 2 i want to print this data in hrml table please tell me

this is my 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>

ok sir i am create a dynamic table but sir in my html page i am use dataTable if i open page datatable is working but after appand data using jqury its not show all options it show only simple table how i solve this problem — Hemant Prajapat, Feb 24 '19 at 11:43

How To Print List Of JsonResponse Data in html

1 Answers1