1

I've looked at other questions related to this one, but have yet to find something that answers my (first!) question:

I'm serializing a django view and sending it to the server with ajax (jquery). I receive the serialized data (tested it with alert and received the JSON data, 200 ok reponse), but am unable to get the following to work on success:

$('div#nextSet' + currentLetter).click(function(){
      var output = '';
            $.ajax({
                url: 'path/to/django/view',
                data: {'data':sentToServer},
                datatype: 'json',
                error: function(xhr_data) {
                    display_error();
                },
                success: function(data) {
                    $.each(data, function(i){
                        var firstName =data[i].fields.first_name;
                        var lastName = data[i].fields.last_name;
                        var portrait = data[i].fields.portrait;
                        var output = '<ul><li>' + firstName + ' ' + lastName + '</li>';
                        output += '<li><img src="' + portrait + '" /></li></ul>';
                        alert(output);
                    });
                }
            });
        });

This code works in google chrome and firefox in the console (alert shows with sample html), but fails to run on the page. I'm getting the following error:
Uncaught TypeError: Cannot read property 'first_name' of undefined.

I've tried the console to see how to access javascript map/dictionary items, and am able to get a value when entering the following, replacing i with an actual number: data[number].fields.first_name The value is shown in the console and no error message appears.

This is a sample of the data returned from the django view for a single item: var data = [{"pk": 8, "model": "app.model", "fields": {"portrait":
"this/is/the/photo/path.png", "first_name": "First", "last_name": "LastName"}}, ].

All of this is embedded in the success code, meaning nothing should be executed(?) unless the callback is available. So if data is present -- as alert(data) is working and I get a 200 ok response from the server -- and the code is working in console -- meaning the alert is processed and appears, is there something I'm overlooking?

clekstro
  • 593
  • 4
  • 10
  • Thanks to @Storm for pointing me in the right direction with console.log. The argument for ajax should be *dataType*, not *datatype*. So it was interpreting it as a string instead of JSON. This obviously didn't show up in the console, as it was correctly identified as a JSON object! Thanks for the help... – clekstro Jul 24 '11 at 13:35

1 Answers1

0

The fact that you get "Uncaught TypeError: Cannot read property 'first_name' of undefined." suggests that field is not defined on the data, but that you actually get the object in the array.

One idea could be to print a console statment of the array object.

Just add:

console.log(data[i])

directly inside the each function

The reason might be related to this

Community
  • 1
  • 1
niklasdstrom
  • 742
  • 6
  • 17
  • I've added the code to my .each() function, but it nearly locks up the browser, showing each character on a new line (is this normal?). Also, does this address why it works when the data variable is defined in the console and the exact same code is pasted in, executed, and runs successfully? – clekstro Jul 24 '11 at 13:22
  • @frosch62 Then my guess is that your data is not a object but a string. did you set the mimetype to "application/javascript" – niklasdstrom Jul 24 '11 at 13:25
  • @frosch62 if you put console.log(data); in your success function, what does it print? is it an object or just the data as a string – niklasdstrom Jul 24 '11 at 13:28
  • Good guess! That was my suspicion as well! But I've actually solved the problem. See my edited question above for the solution... – clekstro Jul 24 '11 at 13:30