Retrieving JSON array in Javascript from PHP

Question

I am attempting to return a json encoded array to JS from PHP and i've done so many times before but now i'm getting a weird error. I am successfully getting the data and it's displaying the array in chrome. However, I cannot get it to enter the AJAX success function if I specify the dataType: 'json'. If I remove the dataType and use var parsed = JSON.parse(data); it will enter the success function but it will throw an unexpected type error. Please help.

Chrome output:

[
 {
 "fullURL": "https://lh6.googleusercontent.com/--ZKG_L-SA9c/UgqECNqP4II/AAAAAAAAA2I/i5nCa3CvKqM/s912/2010raptor_firstdrive002_opt.jpg",
 "thumbURL": "https://lh6.googleusercontent.com/--ZKG_L-SA9c/UgqECNqP4II/AAAAAAAAA2I/i5nCa3CvKqM/s128-c/2010raptor_firstdrive002_opt.jpg",
 "location": "",
 "caption": "",
 "tags": "",
 "program_instance_id": "a0Ji0000001pPO6EAM"
 },
 {
 "fullURL": "https://lh3.googleusercontent.com/-kyUg7_Rul90/UgqEDIu4DhI/AAAAAAAAA2Q/WF0BAEI7smo/s912/220px-Microchip_PIC24HJ32GP202.jpg",
 "thumbURL": "https://lh3.googleusercontent.com/-kyUg7_Rul90/UgqEDIu4DhI/AAAAAAAAA2Q/WF0BAEI7smo/s128-c/220px-Microchip_PIC24HJ32GP202.jpg",
 "location": "",
 "caption": "",
 "tags": "",
 "program_instance_id": "a0Ji0000001pPO6EAM"
 }
]

PHP

$arr = array();
foreach($photoURLS as $photo)
{
$arr[] = $photo;
}
}
echo json_encode($arr);

---

JS

$.ajax
({
 async: "false",
 type: 'POST',
 data: {action: 'var1', albumName: 'var2'},
 dataType: 'json',
 url: '/controller/function',
 success: function(data) 
 {
 //alert($.isArray(data));
 $.each(parsed, function(i, index) {
 alert(index.fullURL);
 });
 }
 });

• Felix Kling: This would somehow suggest that the response you get is not valid JSON. However, what you posted is valid. Are you echoing anything else in your PHP script?
• elclanrs: Why do you need to loop the urls and push them to another array? Can't you just echo json_encode($photoURLS)?
• benestar: If you remove the dataType attribute, jQuery will automatically guess the data type, so perhaps you won't need to JSON.parse the result.
• Undermine2k: @Felix yes there are other echo's in the controller, but only 1 echo in that function which is the json_encode($arr)
• Divey: Sometimes I run into these types of problems,on the PHP side I'll call ob_clean(); echo json_encode($arr); exit(); to make sure I'm not sending anything "extra." Might be worth a shot.

Answer 1

So I worked the code back and think this solution might work for you.

$.ajax({
 async: "false",
 type: 'POST',
 data: {
 action: 'var1',
 albumName: 'var2'
 },
 dataType: 'json',
 url: '/controller/function',
 success: function(data) {
 $.each(data, function(index, element) {
 console.log(index);
 console.log(element.fullURL);
 console.log(element);
 });
 }
});

I can't test the ajax event however I have tested out the json you provided with the each loop and it seams to work. LINK TO FIDDLE

var data = [{
 "caption": "",
 "fullURL": "https://lh6.googleusercontent.com/--ZKG_L-SA9c/UgqECNqP4II/AAAAAAAAA2I/i5nCa3CvKqM/s912/2010raptor_firstdrive002_opt.jpg",
 "location": "",
 "program_instance_id": "a0Ji0000001pPO6EAM",
 "tags": "",
 "thumbURL": "https://lh6.googleusercontent.com/--ZKG_L-SA9c/UgqECNqP4II/AAAAAAAAA2I/i5nCa3CvKqM/s128-c/2010raptor_firstdrive002_opt.jpg"
}, {
 "caption": "",
 "fullURL": "https://lh3.googleusercontent.com/-kyUg7_Rul90/UgqEDIu4DhI/AAAAAAAAA2Q/WF0BAEI7smo/s912/220px-Microchip_PIC24HJ32GP202.jpg",
 "location": "",
 "program_instance_id": "a0Ji0000001pPO6EAM",
 "tags": "",
 "thumbURL": "https://lh3.googleusercontent.com/-kyUg7_Rul90/UgqEDIu4DhI/AAAAAAAAA2Q/WF0BAEI7smo/s128-c/220px-Microchip_PIC24HJ32GP202.jpg"
}];
$.each(data, function (index, element) {
 console.log(index);
 console.log(element.fullURL);
});

also good news is that your json is 100% valid so what is being passed back seams correct. Hope this helps

Answer 2

Maybe you need to send the correct HTTP header with your response. See here: https://stackoverflow.com/questions/267546/correct-http-header-for-json-file

Answer 3

The variable parsed at your $.each function is not defined. you should use data instead of parsed as data is the variable at your success callback function.

$.each(data, function(i, index) {
 alert(index.fullURL);
 });