Unable to access json array elements when running nested ajax request

Question

Does anyone know why I can't access the array keys in the generated json array. Basically, I am doing an ajax call, then on success, doing another one. Everything works fine and I am getting a full, healthy and valid json array return, but I cannot access the keys and values.

My jQuery

$("#register-form").submit(function(e){
  e.preventDefault();
  var firstname = $('#regfirstname').val();
  var surname = $('#regsurname').val();
  var email = $('#regregemail').val();
  var password = $('#regregpassword').val();
  var band = $('#regband').val();
  var website = $('#regwebsite').val();
  var company = $('#regcompany').val();
  var address = $('#regaddress').val();
  var city = $('#regcity').val();
  var state = $('#regstate').val();
  var postcode = $('#regpostcode').val();
  var country = $('#regcountry').val();
  var phone = $('#regphone').val();
  var age = $('#regage').val();
  var subscribe = $('#regsubscribe').val();
  $.ajax({
    type : 'POST',
    url : '/ajax/register',
    data : 'firstname='+firstname+'&surname='+surname+'&email='+email+'&password='+password+'&band='+band+'&website='+website+'&company='+company+'&street='+address+'&city='+city+'&state='+state+'&postcode='+postcode+'&country='+country+'&phone='+phone+'&age='+age+'&subscribe='+subscribe,
    success : function(data){
      // automatically log the user in
      $.ajax({
        type : 'POST',
        url : '/ajax/login',
        data : 'email='+email+'&password='+password,
        success : function(user){
          alert(user.logged_in);
        },
        datatype : 'json'
      });
    },
    datatype : 'json'
  });
});

If I do alert(user); it alerts the entire json array. But as soon as i try and access a value within it, it returns undefined.

Example json array:

{"logged_in":true,"firstname":"Joe","surname":"Bloggs","Full_name":"Joe Bloggs","email":"[email protected]","phone":"123456789","website":"www.site.com.au","age":"25","street":"1 Road Street","city":"Town","state":"BLA","postcode":"1234","country":"13","company":"Freedman Electronics","band":"Daysend","subscribe":"2","mics":0}

Any ideas?

Is this even possible to do? (AJAX within AJAX I mean).

When you say alert(user) shows the entire json array, do you mean it's showing: {"logged_in":true,"firstname":"Joe","surname":"Bloggs", … because it should show: [Object] - is the 'user' parameter being populated by a string instead of the json object? — Matt Bayliss
– Matt Bayliss, Commented Apr 14, 2011 at 5:50
It's not an answer to your question, but why don't you login the user with the first reuqest, if registration was successfull. This way you have two requests, which is slower. — istvan.halmen
– istvan.halmen, Commented Apr 14, 2011 at 6:02
When you get the response back, is there a JSON tab available in the Firebug(if using firefox) panel..and I do agree with dioslaska you should complete it in single ajax request... — Sangeet Menon
– Sangeet Menon, Commented Apr 14, 2011 at 6:08

istvan.halmen · Accepted Answer · 2011-04-14 06:10:50Z

2

Use dataType instead of datatype in your ajax settings. It's case sensitive.

answered Apr 14, 2011 at 6:10

istvan.halmen

3,3401 gold badge27 silver badges31 bronze badges

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

1 Comment

Matt Bayliss Over a year ago

I totally missed the obvious. +1

Sangeet Menon · Accepted Answer · 2011-04-14 06:03:17Z

0

Try downloading json2.js and add it in your app

and try the following code in the success block

success : function(user){{
      var response=eval("("+JSON.stringify(user)+")");
      alert(response.logged_in);
      alert(response.firstname);
},

answered Apr 14, 2011 at 6:03

Sangeet Menon

9,9238 gold badges44 silver badges60 bronze badges

Comments

Matt Bayliss · Accepted Answer · 2011-04-14 06:09:43Z

The problem seems to lie with your /ajax/login page - the response is being returned as a string, not a json object. For example the following:

<script type="text/javascript">
var test = {"logged_in":true,"firstname":"Joe","surname":"Bloggs","Full_name":"Joe Bloggs","email":"[email protected]","phone":"123456789","website":"www.site.com.au","age":"25","street":"1 Road Street","city":"Town","state":"BLA","postcode":"1234","country":"13","company":"Freedman Electronics","band":"Daysend","subscribe":"2","mics":0};

alert(test);
</script>

Displays:

[object Object]

If in your case the login page is returning the following for alert(user):

{"logged_in":true,"firstname":"Joe","surname":"Bloggs","Full_name":"Joe Bloggs","email":"[email protected]","phone":"123456789","website":"www.site.com.au","age":"25","street":"1 Road Street","city":"Town","state":"BLA","postcode":"1234","country":"13","company":"Freedman Electronics","band":"Daysend","subscribe":"2","mics":0}

Then you either need to debug the output ContentType coming from the login page (best), or do something like:

var jsonuser = JSON.parse(user);
alert(jsonuser.logged_in);

Collectives™ on Stack Overflow

Unable to access json array elements when running nested ajax request

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related