CODEWITHSUNDEEP
javascriptjqueryajaxinstagram
tcd
tcd

Reputation: 1605

jQuery AJAX $.each with Instagram JSON

I use an ajax function to load more photos into a page. I use this function for a user's uploaded images and their feed, which both use "max_id" parameter at the end of the API url... When I try to use this function for the likes, it won't work because the liked media url ends with "max_like_id". I have no idea why, but maybe you guys could help me out! Here's all my code:

<script type="text/javascript">
$(document).ready(function() {
  $('#more').click(function() {
var user   = $(this).data('user'),
maxid = $(this).data('maxid');

$.ajax({
type: 'GET',
url: 'ajaxloadlikes.php',
data: {
  user: user,
  max_like_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
$.each(data.images, function(i, img) {
$('ul#photos').append('<a href="/media.php?user=' + img.user + '&id=' + img.id + '"><img src="' + img.url + '" alt="" /></a>');
});
// Store new maxid
$('#more').data('maxid', data.next_id);
 }
});
 });
});

</script>

<a id="more" data-maxid="'.$liked_media->pagination->next_max_like_id.'" data-user="self'">Load More</a>

and then my ajaxloadlikes.php has this:

$maxID = $_GET['max_like_id'];
$userID = $_GET['user'];
$accessID = **access token**;

$next = "https://api.instagram.com/v1/users/self/media/liked?access_token={$accessID}&max_like_id={$maxID}";

$json = file_get_contents($next);

$media = json_decode($json);

// Collect everything for json output
$images = array();
foreach ($media->data as $data) {
$images[] = array('id' => $data->id, 'url' => $data->images->low_resolution->url, 'user' => $data->user->username);
}

echo json_encode(array('next_id' => $mine->pagination->next_max_like_id, 'images' => $images));

If I set the $next url to have "max_id" rather than "max_like_id" it just loads the same images over and over...

Thanks for any help!

Upvotes: 0

Views: 2775

Answers (1)

Robert
Robert

Reputation: 8767

Based off of the code provided, it seems as though you are referencing your objects incorrectly. data.data[i] refers to the object returned, data, and then a property within of data--data.data, which then appears to be an array as indicated by the use of [i]. However, I'm not seeing where you are declaring i or a data property within your object.

Due to the lack of supporting information I made a few assumptions in my example:

var data = {
    "next_id": "*next-id*",
    "images": [
        {
        "id": "*image id*",
        "url": "*image low_resolution link*",
        "user": "*user*"},
    {
        "id": "*image id*",
        "url": "*image low_resolution link*",
        "user": "*user*"}
    ]
};

var json = data.images;

for(var i = 0; i < json.length; i++) {
    var img = json[i];
    var item = '<li><div class="image"><a href="/media.php?user=' + img.user + '&id=' + img.id + '"><img src="' + img.url + '" alt="" /></a><a href="/media.php?user=' + img.user + '&id=' + img.id + '"><img class="hoverimage" src="/zoom.png" alt="" /></a></div></li>';
    $('ul#photos').append(item);
}

Demo: http://jsfiddle.net/DdqxT/

The above code takes the data object and then loops through the images property to return the objects within its array.

One thing I notice in your question is that you have img.user. which should not contain the trailing ..

Upvotes: 1

Related Questions