Ajax request returns undefined

Question

I have the following ajax request:

$.ajax({
    type:'POST',
    url:'../php/anmelden_info.php',
    data:{
        kat :  'Freizeitfussballer'
    },
    success: function(data){
        alert(data[0].anmelde_info);
    }
});

which alerts undefined but i don't know why, because when I go the my console and look for the answer I get:

[{"kategorien_id":"3","kat_name":"Fasnacht","anmelde_info":"\n<b>Informationen:.... ......<\/b>\n<br \/>\nDer Turniereinsatz betr\u00e4gt 100.- pro Mannschaft."}]

and I have no idea what I'm doing wrong!

Answer 1

set dataType: json in you jquery call
As follows

 $.ajax({
    type:'POST',
     url:'../php/anmelden_info.php',
     data:{ kat :  'Freizeitfussballer'},
     dataType: json,
     success: function(data){
      console.dir(data);
     }
    });

or if it not worked try this

 $.ajax({
    type:'POST',
     url:'../php/anmelden_info.php',
     data:{ kat :  'Freizeitfussballer'},
     dataType: json,
     success: function(data){
     data = JSON.parse(data);
     console.dir(data);
     }
    });

Answer 2

Try the below code first whilst you have the developer tools open in either Firebug or Chrome.  This will show you the structure of the data obejct passed into the sucess method.

$.ajax({
    type:'POST',
     url:'../php/anmelden_info.php',
     data:{
      kat :  'Freizeitfussballer'
     },
     success: function(data){
      console.dir(data);
     }
    });

Answer 3

You have to use $.each() in your success function:

success: function(data){
    $.each(data, function(i, item){
       console.log(data.anmelde_info);
    });
}

And i suggest you to use console.log() for a better debugging.