[Answer]-Ajax + Jquery + Django

by

1👍

✅

Check bellow snippet,
Your object is in item object of $.each function
and you can access it by item.fields.firstname and item.model

var jsonData =[{"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": "a.griffin@email.com"}, "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": "a.clary@email.com"}, "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": "a.smith@email.com"}, "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": "a.west@email.com"}, "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": "a.bonilla@email.com"}, "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": "a.kim@email.com"}, "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": "a.chilton@email.com"}, "pk": 59} ];



                     $.each(jsonData,function(i,item){
                        alert(i + ":" + item.fields.firstname);
                        $("#corpoTabela").append('<tr>' +
                    '<td>' +
                    item.fields.firstname +
                    '</td>' +
                                                 '<td>' +
                    item.fields.lastname +
                    '</td>' +
                    '</tr>');
                    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="corpoTabela">
  </table>

UPDATE

In your case your code should look like, just parse your string to JSON object and Your entire JS code should look like this

<script type="text/javascript">
    $(document).ready(function(){
        $("#btnPersons").click(function(){
            $.ajax({
                type: "GET",
                url: "/get_person/",
                dataType: "json",
                success: function(result){
                    var data = JSON.parse(result);
                    $.each(data, function(i, item){
                        $("#corpoTabela").append('<tr>' +
                        '<td>' +
                        item.fields.firstname +
                        '</td>' +
                        '</tr>');
                    });
                }
            });
        });
    });
</script>
👤Mox Shah

0👍

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' );
}
👤Twitch

Leave a comment