Ajax + Jquery + Django

Question

I try use ajax in Django, but not work the table fields.

I need return

firstname, lastname

but the most I got was the entire json result

See my complete code https://github.com/rg3915/ajax_test

views.py

def person_list_ajax(request):
    return render(request, 'core/person_list_ajax.html')


def get_person(request):
    persons = Person.objects.all()  # .filter(id=1)
    # , fields=('firstname', 'lastname'))
    items = serializers.serialize('json', persons)
    result = json.dumps(items)
    return HttpResponse(result)  # , content_type="application/json")

template: person_list_ajax.html

<script type="text/javascript">
    $(document).ready(function(){
        $("#btnPersons").click(function(){
            $.ajax({
                type: "GET",
                url: "/get_person/",
                dataType: "json",
                success: function(result){
                    // alert(result);
                    // var result = {"model": "core.person", "fields": {"lastname": "Johnson", "firstname": "Dawn"}, "pk": 1};
                    /* $.each(result,function(i,item){
                        alert(i + ":" + item)
                    }); */

                    /* $.each(result, function(i, item){ */
                        $("#corpoTabela").append('<tr>' +
                        '<td>' +
                        result +
                        '</td>' +
                        '</tr>');
                    // });
                }
            });
        });
    });
</script>

I try for return each values, but not work

                $.each(result, function(i, item){
                    $("#corpoTabela").append('<tr>' +
                    '<td>' +
                    result +
                    '</td>' +
                    '</tr>');
                });

And if try result.firstname return 'undefined'.

Question: how to return each values 'firstname' and 'lastname' of json?

See json result (incomplete - is long)

[{"model": "core.person", "fields": {"lastname": "Griffin", "created_at": "2015-01-04T00:15:15.253Z", "firstname": "Aaron", "phone": "(75) 3184-2917", "blocked": false, "birthdate": "1994-03-15T23:03:31.115Z", "modified_at": "2015-01-04T00:15:15.253Z", "cpf": "43024276069", "email": "[e-mail]"}, "pk": 84}, {"model": "core.person", "fields": {"lastname": "Clary", "created_at": "2015-01-04T00:15:15.248Z", "firstname": "Alexis", "phone": "(76) 1129-3183", "blocked": false, "birthdate": "1993-08-09T06:48:49.647Z", "modified_at": "2015-01-04T00:15:15.248Z", "cpf": "68959775006", "email": "[e-mail]"}, "pk": 82}, {"model": "core.person", "fields": {"lastname": "Smith", "created_at": "2015-01-04T00:15:15.246Z", "firstname": "Alfonso", "phone": "(23) 1054-7766", "blocked": false, "birthdate": "1997-06-23T19:15:15.627Z", "modified_at": "2015-01-04T00:15:15.246Z", "cpf": "68527495071", "email": "[e-mail]"}, "pk": 79}, {"model": "core.person", "fields": {"lastname": "West", "created_at": "2015-01-04T00:15:14.870Z", "firstname": "Angeline", "phone": "(34) 5708-6947", "blocked": true, "birthdate": "1987-11-01T21:12:06.034Z", "modified_at": "2015-01-04T00:15:14.870Z", "cpf": "86925336118", "email": "[e-mail]"}, "pk": 48}, {"model": "core.person", "fields": {"lastname": "Bonilla", "created_at": "2015-01-04T00:15:15.089Z", "firstname": "Ann", "phone": "(58) 7408-7824", "blocked": false, "birthdate": "1990-09-15T09:05:56.708Z", "modified_at": "2015-01-04T00:15:15.089Z", "cpf": "95614240530", "email": "[e-mail]"}, "pk": 70}, {"model": "core.person", "fields": {"lastname": "Kim", "created_at": "2015-01-04T00:15:14.832Z", "firstname": "Antoine", "phone": "(54) 1458-8935", "blocked": false, "birthdate": "2002-03-05T12:53:11.508Z", "modified_at": "2015-01-04T00:15:14.832Z", "cpf": "62622224142", "email": "[e-mail]"}, "pk": 46}, {"model": "core.person", "fields": {"lastname": "Chilton", "created_at": "2015-01-04T00:15:15.026Z", "firstname": "Arthur", "phone": "(88) 1659-3588", "blocked": true, "birthdate": "2000-03-22T10:07:24.715Z", "modified_at": "2015-01-04T00:15:15.026Z", "cpf": "28367921465", "email": "[e-mail]"}, "pk": 59}, {"model": "core.person", "fields": {"lastname": "Lee", "created_at": "2015-01-

Answer 1

This is how I do it.

Add all of this after the success in your ajax load:

success: function(result){
    // create an empty array
    var items = []

    // create table headers
    items.push("<tr><th>Last Name, First Name</th></tr>");

    // populate each table row
    $.each( results.fields, function( key, val ) {
        items.push('<tr><td>' + val.lastname + ', ' + val.firstname + '</td></tr>');

    // load results into a new table in the #corpoTabela div
    $( "<table>", { html: items.join( "" ) }).appendTo( '#corpoTabela' );
}