Search code examples
jqueryajaxjsonjsonp

Ajax jQuery JSON calls


I needing some help here if possible. I have a JSON file and I'm trying to get just 1 result from the image files and specify which image by a number e. g. the first one - is this possible. I have tried lots of different [1] ways but I'm clearly doing something wrong here.

Here's my attempt: http://jsfiddle.net/garrycalliopix/Z233A/

$(function(){
    $.get('http://sunrise.bluechipholidays.co.uk/webservices/property/images/apikey/demo/propertycode/zinc52/propertycode/proch', function(data){
    var $imagetest = $('#imagetest');
    $(data.data).each(function(i, x){
        $(x.images).each(function(j, k){
            var $img = $('<img></img>');
            $img.attr[1]; //i want the 2nd image returned
            $img.attr('width', '150px');
            $img.attr('height', '75px');
            $img.attr("src", k.url).appendTo("#imagetest");
        });

    });
});
});

[0] is the image number returned not the count of images: [2] would be the 3rd image.


Solution

  • So you are looking to get the second image? You can get the second image with this small example.

    Example below returns two images, are those images the ones you want or do you want only the first?

    See this fiddle

    $.get('http://sunrise.bluechipholidays.co.uk/webservices/property/images/apikey/demo/propertycode/zinc52/propertycode/proch', function(data){
            var $imagetest = $('#imagetest');
            var j = 0; // keep a counter to count which element you want to display
            $(data.data).each(function(i, x){ // loop through all elements in data.data
                j++; // add one (j = j + 1)
                if(j == 2){ // choose which one you want to display, 2 is the second iteration of $(data.data).each()
                    var $img = $('<img></img>');
                                $img.attr('width', '150px');
                    $img.attr('height', '75px');
                    $img.attr("src", x.images[2].url).appendTo("#imagetest");
                }
            });
        });