Ajax function is not finding the right data - php

Question

I have created an AJAX function and wondered why my JS was giving errors.
$(document).ready(function() {
$('#more').click(function() {
var tag = $(this).data('tag'),
maxid = $(this).data('maxid'),
url = $(this).data('root'),
id = $(this).data('id'),
count = $(this).data('count');
$.ajax({
type: 'GET',
url: '/ajax',
data: {
tag: tag,
max_tag_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$('section#images').append('<img src="' + data[src].images.standard_resolution.url + '">');
});
// Store new maxid
$('#more').data('maxid', data.next_id);
}
});
});
});
I have created a page that takes data from the instagram API and stores the data in an array so when I click more it loads more images into a container div.
Edit:
Below is the code on the php ajax page that encodes the array into json output:
$instagram = new Instagram\Instagram;
$instagram->setAccessToken($_SESSION['instagram_access_token']);
$token = $_SESSION['instagram_access_token'];
//$clientID = $_SESSION['client_id'];
$current_user = $instagram->getCurrentUser();
$tag = $instagram->getTag('folkclothing');
$media = $tag->getMedia(isset($_GET['max_tag_id']) ? array( 'max_tag_id' => $_GET['max_tag_id'] ) : null);
// Collect everything for json output
$images = array();
foreach ($media as $data) {
/* $collection = array($data->images->standard_resolution->url,$data->link,$data->getId(),$data->likes->count); */
/*
$images[] = $data->images->standard_resolution->url;
$images[] = $data->link;
$images[] = $data->getId();
$images[] = $data->likes->count;
*/
/*
$data_url[] = $data->images->standard_resolution->url;
$data_link[] = $data->link;
$data_id[] = $data->getId();
$data_likes[] = $data->likes->count;
$images[] = array($data_url);
*/
$images[] = array($data->images->standard_resolution->url,$data->link,$data->getId(),$data->likes->count);
}
echo json_encode(array(
'next_id' => $media->getNextMaxTagId(),
'images' => $images
));
The above code creates an array and then it gets converted to a json object but I am unsure how to split it into nested arrays for the image url, image id, likes and the image link. Is this possible to get nested arrays?
End of edit
It did work but I want to find specific elements inside this array so I created the AJAX function above.
The error I get is:
Uncaught TypeError: Cannot read property 'images' of undefined
Any help would be great.

Answer 1

try to replace
$.each(data.images, function(i, src) {
$('section#images').append(
'<img src="' + data[src].images.standard_resolution.url + '">'
);
});
with
$.each(data.images, function(i, src) {
$('section#images').append(
'<img src="' + src.standard_resolution.url + '">'
);
});

Answer 2

For the answer to this I ended up building my array up properly and using the json_encode
to get it all listed properly so I could pull the right data out like so.
ajax.php:
foreach ($media as $data) {
$images[] = array(
"data_url"=>$data->images->standard_resolution->url,
"data_link"=>$data->link,
"data_text"=>$data->getCaption(),
"data_id"=>$data->getId(),
"data_likes"=>$data->likes->count
);
}
echo json_encode(array(
'next_id' => $media->getNextMaxTagId(),
'images' => $images
));
This created the correct array of data.
I then corrected the js for it to work.
JS code:
$(".loading").hide();
$(document).ready(function() {
$('#more').click(function() {
var tag = $(this).data('tag'),
maxid = $(this).data('maxid');
$.ajax({
type: 'GET',
url: '/ajax',
data: {
tag: tag,
max_tag_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
var $content = $('<article class="instagram-image"><form class="forms" action="/image" method="post"><a class="fancybox" href="'+ data.images[i].data_link +'"><img alt="' + data.images[i].data_text + '" src="' + data.images[i].data_url + '" alt="' + data.images[i].data_text + '" /></a><button class="ajax instabtn like icon-heart" type="submit" name="action" value="Like"></button><input type="hidden" name="id" value="'+ data.images[i].data_id +'"><p>'+ data.images[i].data_likes +'</p></form></article>');
$('section#images').append($content).fadeIn(1000);
});
// Store new maxid
$('#more').data('maxid', data.next_id);
}
});
});
});
I hope this helps people out who need that extra bit of information.

Answer 3

try this
....
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$('section#images').append(
'<img src="' + data[i].images.standard_resolution.url + '">'
//----^----here
);
});
// Store new maxid
$('#more').data('maxid', data.next_id);
}

Answer 4

Change data access in image tag
from
data[src].images.standard_resolution.url
^^^
to
data[i].images.standard_resolution.url
^

Answer 5

Here you are using Array of data.images, so you should use index of data.images
Try it like,
if(data.images)// check if data.images found, otherwise it will give error
{
$.each(data.images, function(i, src){
$('section#images').append(
'<img src="' + data.images[i].standard_resolution.url + '">'
// use i ----^----here
// or use src.standard_resolution.url directly
);
});
}