Can't parse JSON data structure in JavaScript

Question

How do pass back values to a form that was posted to the server using Ajax?

In the view (shown below), I am just returning a simple data structure to test things:

def detail(request, widget_id):

    widget = get_object_or_404(Widget, pk=widget_id)

    if request.method == 'POST':
        form = WidgetDetailsForm(request.POST, instance=widget)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect(request.path)  # Redirect after POST
        else:
            if request.is_ajax():
                response_dict = {
                    'page': 1,
                    'total': 2,
                    'rows': 3
                }
                json = simplejson.dumps(response_dict)
                return HttpResponse( json, mimetype='application/json')

    else:
        form = WidgetDetailsForm(instance=widget)

    params = {}
    params['widget'] = widget
    params['form'] = form
    return render_to_response('widgets/detail.html', params,
                              context_instance=RequestContext(request))

The JavaScript in the template is:

<script type="text/javascript">
    /* <![CDATA[ */
        // Wait for the DOM to be loaded
        $(document).ready(function() {
            // Bind 'myForm' and provide a simple callback function.
            $('#updateform').wl_Form({
                onSuccess: function(data, status){
                    alert(data);
                    alert(data.page);
                    alert(data.rows);
                    alert(data.total);
                },
                "status": false,
                "confirmSend": false
            });
        });
    /* ]]> */
</script>

I get the following from the alert statements.

{"rows": 3, "total": 2, "page": 1}
undefined
undefined
undefined

Why does data.page, data.rows, and data.total return undefined?

Peter Mortensen · Accepted Answer · 2012-06-24 00:53:09Z

2

Because data is a string (of JSON) - note the output of your first alert().

Try something like:

$('#updateform').wl_Form({ 
    onSuccess: function(response, status){
        var data = $.parseJSON(response); 
        alert(data);
        alert(data.page);
        //...
    }
});

edited Jun 24, 2012 at 0:53

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 23, 2011 at 10:30

timdev

63.1k6 gold badges86 silver badges93 bronze badges

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

1 Comment

Karl Knechtel Over a year ago

Exactly. You passed the data back fine. But only bytes (in this case, interpreted as a string, which represents something in JSON format) can be transmitted over the internet. On the receiving end, you need to interpret this result. I'm confused because your question says "Can't parse...", but the code doesn't actually make any attempt to parse the data.

marc · Accepted Answer · 2011-07-23 10:30:21Z

0

Maybe do

data = JSON.parse(data);

and dont forget do include json2.js for older browsers?

It depends on what wl_Form does.

answered Jul 23, 2011 at 10:30

marc

6,2431 gold badge31 silver badges33 bronze badges

Collectives™ on Stack Overflow

Can't parse JSON data structure in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related