Access Each JSON Array Element onClick Using AJAX PDO PHP

Question

I'm trying to access each element stored as a Base64 image/blob in a JSON array constructed from a MySQL query.

The idea is to click a button that goes through each element and displays the image.

I have gotten it to display the first image however when i click again, the next image doesn't show.

Any help will be much appreciated.

AJAX:

   $(function () {
        $('#getimg1').on('click', function () {
             $.ajax({
            type:'GET',
            dataType: 'json',
            url: 'http://testing/api/getimg',
            success:function(getinfo){
                 $.each(getinfo, function(i, displayimg){

                $('#HTMLBox').prop('src','data:image/png;base64,' + displayimg.XXX ---- //Here I'm suspecting something?); 

                 });
            }
        }); 
    });  
    });

PHP:

 $sql = "SELECT img from artistlocation";

    try{
        $db = new db();
        $db = $db->connect(); 
        $stmt = $db->query($sql);
        $data = array();
        while($result = $stmt->fetch(PDO::FETCH_OBJ))    
        {
            $data[] = base64_encode($result->img);
        }
       echo json_encode($data);
    }
    catch(PDOException $e){
        echo '{"error": {"text": '.$e->getMessage().'}';
    }

I'm using just 2 images to test this.

Answer 1

So, if you wanted to do something really dirty, you could track how many images you've loaded via a hidden input. You can increment that upon your ajax success. Then, what you can do is pass to your PHP via your AJAX that value, and run something like:

SELECT * FROM images LIMIT 1 OFFSET $images_already_fetched

By passing an OFFSET declaration, you're telling it to skip that many rows.

Answer 2

Because the ajax call you make will return all of the image records, I think it would be more efficient to store that data in a variable and then just rotate through the images rather than making call to your php code with each click. Here's what I would suggest, if you're using just jQuery:

var images = [],
    index = 0,
    count = 0,
    max = 0;

$.getJSON("http://testing/api/getimg", function(data) {
    images = data;
    count = images.length;
    max = count - 1;
});

$('#getimg1').on('click', function() {

    if (count === 0) {
        return;
    }

    if (index === max) {
        index = 0;
    } else {
        index++;
    }

    $('#HTMLBox').attr('src', 'data:image/png;base64,' + images[index]);

});

I must admit I didn't test it, but I believe it should work - if you could try and see how you get on.