CODEWITHSUNDEEP
jqueryajaxdjango
Manish Gupta
Manish Gupta

Reputation: 4666

How to display list data from ajax response in table in django

I am doing an ajax POST call which returns a zipped list of 4 lists in response.

ajax call:

$('[name="start_manifest"]').on('click', function(event){
    event.preventDefault();
    var channel = $('[name="channel_name"]').val();
    var courier = $('[name="courier_name"]').val();
    $.ajax({
        url : "/manifest/",
        type : "POST",
        data : {action:'start_manifest',
                channel:channel,
                courier:courier},

        success : function(response) {
            var order_data = response.order_data;
            $.niftyNoty({
                type:"primary",icon:"",title:"Start Scanning Orders",message:"Current Manifest Number: " + response.manifest_number,container:"floating",timer:5000
            });
        },
        ....

My django view:

if request.POST.get('action') == 'start_manifest':
    channel = request.POST.get('channel')
    courier = request.POST.get('courier')
    manifest_data = manifest.startManifest(channel, courier)
    response_data = {}
    response_data['manifest_number'] = manifest_data[0]
    response_data['order_data'] = manifest_data[1]
    return HttpResponse(json.dumps(response_data),content_type="application/json")

Here manifest_data[1] is a zipped list like:

manifest_data[1] = zip(LIST_1, LIST_2, LIST_3, LIST_4)

Normally I can populate a table from a zipped list like:

{% for a,b,c,d in order_data %}
<tr>
    <td>{{a}}</td>
    <td>{{b}}</td>
    <td>{{c}}</td>
    <td>{{d}}</td>
</tr>
{% endfor %}

My question is:

How to populate a table from a zipped list passes as a response to an ajax call? In my case i stored the list in var order_data. Now how can i use this variable to show data in my table? Lets say table id = 'manifest_table'.

Upvotes: 3

Views: 2137

Answers (1)

Manish Gupta
Manish Gupta

Reputation: 4666

I used this code to iterare over the array and add data to table rows.

var order_data = response.order_data;
$('#manifest_table').html('');
$.each(order_data, function(i, item) {
    $('<tr id='+ order_data[i][3] +'>').html('<td>'+ inp +'</td><td style="text-center" >' + order_data[i][0] + '</td><td style="text-center" >' + order_data[i][1]  + '</td><td style="text-center" >' + order_data[i][2]  + '</td><td style="text-center" >' + order_data[i][3]  + '</td>').appendTo('#manifest_table');
});

Upvotes: 1

Related Questions