Adding django view result from ajax as table in template

Question

I have a django model and I view i am aggregating few columns and filtering result and returning as below

def show_grid_summery(request):
    id = request.GET.get('id', None)

    context = {
        "summery": [],
    }

    result = Records.objects.filter(grid_id_id = id).aggregate(Sum('house_count'), Sum('point_count'))
    if len(result) != 0:
        context["summery"].append([result['house_count__sum'], result['point_count__sum']])


    return JsonResponse(context)

And on the template i am getting results using ajax

$.ajax({
                    url: 'ajax/summery/',

                    data: {
                      'id': ID
                    },

                    dataType: 'json',

                    success: function (data) {
                        alert(data);

                        var trHTML = '';
                        document.getElementById('summaryLabel').innerHTML = '';

                        $.each(data.summery , function (item) {
                            trHTML += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
                        });
                        $('#summaryLabel').append(trHTML);
                    }

Now I want to fill the results record (2 columns) as a table inside the #summaryLabel tag. (preferably with headers as well). But I am unable to sort it out after many different attempts.

html part is

<table id="summaryLabel">
            <p>information.</p>
</table>

Can you updated with the HTML code? Particularly the code with #summaryLabel — Phil
– Phil, Commented Oct 24, 2018 at 11:18
What currently happens - do you see rows added to the table? Does the JSON response look correct - does it contain the data you expect (use the network tab in the browser's developer tools to see the response). — Will Keeling
– Will Keeling, Commented Oct 24, 2018 at 12:17
Yes response was coming. I was accessing json with wrong indexing and format. — lat long
– lat long, Commented Oct 25, 2018 at 6:38

little_birdie · Accepted Answer · 2018-10-25 15:36:32Z

2

The jQuery $.each() function passes two parameters, the first is the array index, the second is the object. So it would seem that in your code, your item variable would contain the index, which is not what you want.

Try:

$.each(data['summery'] , function (i, item) {
    trHTML += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
});

or just

$.each(data['summery'] , function () {
    trHTML += '<tr><td>' + this[0] + '</td><td>' + this[1] + '</td></tr>';
});

jQuery $.each() is documented here: http://api.jquery.com/jquery.each/

edited Oct 25, 2018 at 15:36

answered Oct 24, 2018 at 13:09

little_birdie

5,9273 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lat long Over a year ago

Yes this almost worked. Only I had to use data['summery'] in each function instead of data.summery according to my json response.

little_birdie Over a year ago

Glad it helped! I will edit my answer for future searchers.

Collectives™ on Stack Overflow

Adding django view result from ajax as table in template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related