0

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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "pk": 59}, {"model": "core.person", "fields": {"lastname": "Lee", "created_at": "2015-01-

Improve this question
2
  • Can you post JSON that's being return? Commented Feb 18, 2015 at 4:42
  • @MokshShah is edit question again. Commented Feb 18, 2015 at 4:45

2 Answers 2

Reset to default
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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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": "[email protected]"}, "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>
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

your example its work, but im my case, not work with 'result' values direct of json.
how?, I've used your sample JSON only, you just need to update jsonData to result
Uncaught TypeError: Cannot use 'in' operator to search for '31648' in [{"model": "core.person", "fields": {"lastname": "Griffin",...
can you post your complete JSON ?
Let us continue this discussion in chat.
|
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' );
}
Improve this answer

1 Comment

your example return error: Uncaught TypeError: Cannot read property 'length' of undefined

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.