Cannot retrieve django serialized json using javascript

Question

Hi I am parsing serialzed json -

def wall_copy(request):
    posts = user_post.objects.order_by('id')[:20].reverse()
    posts_serialized = serializers.serialize('json', posts)
    return JsonResponse(posts_serialized, safe=False)

and trying to get data as-

$(document).ready(function()
    {
            setInterval(function() 
        {
            var xhr = new XMLHttpRequest();
            xhr.open("GET","http://10.8.21.17:8000/wall/wall_copy/",false);
            xhr.send(null);
            var data = JSON.parse(xhr.responseText);
            //alert(xhr.status+' '+xhr.statusText);
            for(i=0; i<20; i++)
            {
                alert(data[i].post_content);
            }
                }, 3000);
    });

But the problem is that every time it alerts as 'Undefined'. I checked the url and the server is sending json data but I am unable to fetch it.

Json data-

"[{\"fields\": {\"post_id\": \"rahularyan06:16PM on February 26, 2015\", \"posted_by\": \"rahularyan\", \"post_content\": \"koi nhi re\", \"time_of_post\": \"2015-02-26T18:16:00Z\"}, \"model\": \"wall.user_post\", \"pk\": 77}, {\"fields\": {\"post_id\": \"aquaman06:00PM on February 26, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"kuch nhi\", \"time_of_post\": \"2015-02-26T18:00:44Z\"}, \"model\": \"wall.user_post\", \"pk\": 76}, {\"fields\": {\"post_id\": \"rahularyan06:00PM on February 26, 2015\", \"posted_by\": \"rahularyan\", \"post_content\": \"kya hua??\", \"time_of_post\": \"2015-02-26T18:00:04Z\"}, \"model\": \"wall.user_post\", \"pk\": 75}, {\"fields\": {\"post_id\": \"aquaman12:01AM on February 26, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"lelo\", \"time_of_post\": \"2015-02-26T00:01:14Z\"}, \"model\": \"wall.user_post\", \"pk\": 74}, {\"fields\": {\"post_id\": \"aquaman10:41AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"sahi me lega??\", \"time_of_post\": \"2015-02-25T10:41:43Z\"}, \"model\": \"wall.user_post\", \"pk\": 73}, {\"fields\": {\"post_id\": \"aquaman10:41AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"sahi me lega??\", \"time_of_post\": \"2015-02-25T10:41:34Z\"}, \"model\": \"wall.user_post\", \"pk\": 72}, {\"fields\": {\"post_id\": \"shreyansh10:41AM on February 25, 2015\", \"posted_by\": \"shreyansh\", \"post_content\": \"yo\", \"time_of_post\": \"2015-02-25T10:41:17Z\"}, \"model\": \"wall.user_post\", \"pk\": 71}, {\"fields\": {\"post_id\": \"aquaman10:40AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"muh me lega??\", \"time_of_post\": \"2015-02-25T10:40:53Z\"}, \"model\": \"wall.user_post\", \"pk\": 70}, {\"fields\": {\"post_id\": \"aquaman10:40AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"bc\", \"time_of_post\": \"2015-02-25T10:40:42Z\"}, \"model\": \"wall.user_post\", \"pk\": 69}, {\"fields\": {\"post_id\": \"shreyansh10:40AM on February 25, 2015\", \"posted_by\": \"shreyansh\", \"post_content\": \"lele\", \"time_of_post\": \"2015-02-25T10:40:28Z\"}, \"model\": \"wall.user_post\", \"pk\": 68}, {\"fields\": {\"post_id\": \"aquaman10:39AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"kya bhai??\", \"time_of_post\": \"2015-02-25T10:39:39Z\"}, \"model\": \"wall.user_post\", \"pk\": 67}, {\"fields\": {\"post_id\": \"aquaman10:38AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"sb mast\", \"time_of_post\": \"2015-02-25T10:38:22Z\"}, \"model\": \"wall.user_post\", \"pk\": 66}, {\"fields\": {\"post_id\": \"shreyansh10:38AM on February 25, 2015\", \"posted_by\": \"shreyansh\", \"post_content\": \"or baaki??\", \"time_of_post\": \"2015-02-25T10:38:05Z\"}, \"model\": \"wall.user_post\", \"pk\": 65}, {\"fields\": {\"post_id\": \"aquaman10:03AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"badiya\", \"time_of_post\": \"2015-02-25T10:03:39Z\"}, \"model\": \"wall.user_post\", \"pk\": 64}, {\"fields\": {\"post_id\": \"shreyansh10:03AM on February 25, 2015\", \"posted_by\": \"shreyansh\", \"post_content\": \"thik ba\", \"time_of_post\": \"2015-02-25T10:03:23Z\"}, \"model\": \"wall.user_post\", \"pk\": 63}, {\"fields\": {\"post_id\": \"aquaman10:00AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"kaisan??\", \"time_of_post\": \"2015-02-25T10:00:30Z\"}, \"model\": \"wall.user_post\", \"pk\": 62}, {\"fields\": {\"post_id\": \"aquaman10:00AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"hi\", \"time_of_post\": \"2015-02-25T10:00:04Z\"}, \"model\": \"wall.user_post\", \"pk\": 61}, {\"fields\": {\"post_id\": \"aquaman09:58AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"abe jldi likh\", \"time_of_post\": \"2015-02-25T09:58:43Z\"}, \"model\": \"wall.user_post\", \"pk\": 60}, {\"fields\": {\"post_id\": \"aquaman09:57AM on February 25, 2015\", \"posted_by\": \"aquaman\", \"post_content\": \"hello\", \"time_of_post\": \"2015-02-25T09:57:49Z\"}, \"model\": \"wall.user_post\", \"pk\": 59}, {\"fields\": {\"post_id\": \"shreyansh09:39AM on February 25, 2015\", \"posted_by\": \"shreyansh\", \"post_content\": \"lele\", \"time_of_post\": \"2015-02-25T09:39:39Z\"}, \"model\": \"wall.user_post\", \"pk\": 58}]"

Help me how can I get this data through javascript.

Thanks in advance.

What do you see when you dump out the whole data structure to the console? console.log(data)? — tatlar
– tatlar, Commented Feb 26, 2015 at 19:42

JuniorCompressor · Accepted Answer · 2015-02-26 20:37:03Z

4

You should access this way the json response in javascript:

data[i].fields.post_content

The serializer creates for each object a dictionary with keys

fields, which is the values for each field
model, which is the model name which in your case is "wall.user_post".
pk, which is the primary key of your object.

Also in your view you convert to json twice. One time with the serializer and one time with the JsonResponse. You should return the following value from your view:

return HttpResponse(posts_serialized, content_type="application/json")

edited Feb 26, 2015 at 20:37

answered Feb 26, 2015 at 19:30

JuniorCompressor

20.1k4 gold badges33 silver badges58 bronze badges

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

6 Comments

aquaman Over a year ago

I have already tried it but it is giving error that 'data[i].fields is not defined'

aquaman Over a year ago

in alert(data) it is displaying the json but in alert(data[0]) it is displaying '['...why is that..??

aquaman Over a year ago

I tried alert(data[0][0].fields.post_content) but it is giving error - TypeError: data[0][0].fields is undefined

aquaman Over a year ago

No, again it is just giving ]

aquaman Over a year ago

Yes this is the exact code that I wrote in my views.py

|

beiller · Accepted Answer · 2015-02-26 21:10:13Z

0

Here is how I managed a simple JSON example:

def search(request):
    rows = MyDBObject.objects.all()
    response = {}
    for row in rows:
        response[row .id] = {'name': row.name, 'field1': row.field1, 'field2': row.field2}
    return JsonResponse(response)

In javascript:

$.getJSON('/ajax/search', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '"><a href="' + val['field2'] + '" data-ajax="false">' + val['field1'] + ' by ' + val['field2'] + '</a></li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('#search_results_list');
});

answered Feb 26, 2015 at 21:10

beiller

3,1351 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

Cannot retrieve django serialized json using javascript

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related