Retrieve more photos from instagram api on button click

Question

I am building a basic app that retrieves Instagram pics from a certain tag name . I am using the instagram-api-php repo. So far so good. I run into a problem trying to load more pictures related to that tag name . I am using next_max_id as described in the instagram api pagination . I have placed a button in the page and assigned next_max_id to load the rest of the photos. But no photos are being loaded. How could I load more photos on button click? I follow the example from Github

index.php

<script>
    $(document).ready(function() {
      $('#more').click(function() {
        var tag   = $(this).data('tag'),
            maxid = $(this).data('maxid');

        $.ajax({
          type: 'GET',
          url: 'ajax.php',
          data: {
            tag: tag,
            max_id: maxid
          },
          dataType: 'json',
          cache: false,
          success: function(data) {
            // Output data
            $.each(data.images, function(i, src) {
              $('ul#photos').append('<li><img src="' + src + '"></li>');
            });

            // Store new maxid
            $('#more').data('maxid', data.next_id);
          }
        });
      });
    });
  </script>

<?php
  /**
   * Instagram PHP API
   */

    require_once 'Instagram.php';


    // Initialize class with client_id
    // Register at http://instagram.com/developer/ and replace client_id with your own
    $instagram = new Instagram('API KEY');

    // $geo = $instagram->searchMedia(56.8770413, 14.8092744);

    $tag = 'sweden';

    // Get recently tagged media
    $media = $instagram->getTagMedia($tag);

    // Display first results in a <ul>
    echo '<ul id="photos">';

    foreach ($media->data as $data) 
    {
        echo '<li><img src="'.$data->images->thumbnail->url.'"></li>';
    }
    echo '</ul>';

    // Show 'load more' button
    echo '<br><button id="more" name="max_id" data-maxid="'.$media->pagination->next_max_id.'" data-tag="'.$tag.'">Load more ...</button>';
?>

ajax.php

<?php
    /**
     * Instagram PHP API
     */
      set_include_path("../src/" . PATH_SEPARATOR . get_include_path());
      require_once 'Instagram.php';
      use MetzWeb\Instagram\Instagram;

      // Initialize class for public requests
      $instagram = new Instagram('API KEY');

      // Receive AJAX request and create call object
      $tag = $_GET['tag'];
      $maxID = $_GET['max_id'];
      $clientID = $instagram->getApiKey();

      $call = new stdClass();
      $call->pagination->next_max_id = $maxID;
      $call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";

      // Receive new data
      $media = $instagram->getTagMedia($tag,$auth=false,array('max_tag_id'=>$maxID));

      // Collect everything for json output
      $images = array();
      foreach ($media->data as $data) {
        $images[] = $data->images->thumbnail->url;
      }

      echo json_encode(array(
        'next_id' => $media->pagination->next_max_id,
        'images'  => $images
      ));
?>

Answer 1

Change

$.each(data.images, function(i, src) {
  $('ul#photos').append('<li><img src="' + src + '"></li>');
});

to

$.each(data.images, function(i, img) {
  $('ul#photos').append('<li><img src="' + img.standard_resolution.url + '"></li>');
});

Not 100% certain that is the correct property name, but as it stands, you're looping through an array of image objects, setting each image object to src , then trying to use src as the image source, when in fact it's the image object. src is likely a property of it.

EDIT : Here's a jsBin demo. If data.images is in fact an array of objects, my solution should work...