Swap dynamic image with a variable from json call

Question

I have a problem which I can't figure out myself! I'm trying to swap images on hovering with another image. The problem however is that the images are called/loaded dynamically from a Json call. Inside that JSON call I need to create some sort of variable to use outside that JSON call so I can swap the image.

I think I can manage to swap the images myself but right now I'm having trouble to create a variable which can be used outside the getJSON call. In my case how can I use iHover image in var productHtml??

II thought returning iHover would do the trick but that isn't!! Right now iHover returns a blank string or when using [] a blank array.

Any help??

My jQuery

 $.getJSON(url, function (data){

   ... stuff ... 
     $.each(product.related, function(index, rel){
       ... stuff ...

         var image = 'http://cdn.webshopapp.com/i/' + image_id_convert(rel.image) + '/100x150x2/image.jpg'; // this is the main image!!

          var iHover = '';           
            $.getJSON(url, function (data){

              var image2 = rel.images[1]; // this needs to be the second image in the json file
              var image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // this is needed to convert a string to an actual link!!

             ... more stuff ...
              });

              iHover = image2Pic;
              return iHover;

            });

            var productHtml = '<img class="rollover" src="'+image+'" data-alt-src="'+iHover+'" alt="'+rel.fulltitle+'"/>';

The first letter in `AJAX` stands for `asynchronous`. Use [`promises`](http://dailyjs.com/2014/02/20/promises-in-detail/). — PM 77-1, Oct 24 '14 at 00:15
@PM77-1: I know where the A stands for ;) Could you be more precise since I'm not very experienced with javascript?! I've read that article but I'm completely confused... — Meules, Oct 24 '14 at 00:21
How about [this one](https://www.promisejs.org/)? It seems detailed enough. The basic idea is that you do not know when the result of an asynchronous operation is defined and ready to use. Instead you use `promise` which is an object that will eventually hold the result and it's aware of its own current status and the final outcome of the async operation. — PM 77-1, Oct 24 '14 at 00:29
@PM77-1: Ok I still don't get it I think :( Do you perhaps have an example? I can't see how I should do this with my issue?! — Meules, Oct 24 '14 at 00:56
I believe you need to do your assignments in the `success` callback function. See [JQuery's docs on `GetJSON()`](http://api.jquery.com/jquery.getjson/) itself. Am I missing something here? — PM 77-1, Oct 24 '14 at 01:34

L.H · Answer 1 · 2014-10-24T10:20:53.697

0

I believe your problem with assigning the variable lies within the scope:

var iHover = '';           
            $.getJSON(url, function (data){

              var image2 = rel.images[1]; // this needs to be the second image in the json file
              var image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // this is needed to convert a string to an actual link!!

             ... more stuff ...
              });

              iHover = image2Pic;
              return iHover;

            });

As you see the var image2 is only accessable within the function(data){} scope and you try to reach it outside on the last lines.

You might want to create the var image2 and var image2Pic in the same scrope as iHover and set them to undefined there - then load them in the second scope within the function. Hope it helps.

EDIT: This is how I would change the code to get rid of the scope problem

$.getJSON(url, function (data){

   ... stuff ... 
     $.each(product.related, function(index, rel){
       ... stuff ...

         var image = 'http://cdn.webshopapp.com/i/' + image_id_convert(rel.image) + '/100x150x2/image.jpg'; // this is the main image!!

          var iHover = '';
          var image2 = undefined;
          var image2Pic = undefined;
            $.getJSON(url, function (data){

              image2 = rel.images[1]; //REMOVED the var
              image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // REMOVED the var

             ... more stuff ...
              });

              iHover = image2Pic;
              return iHover;

            });

            var productHtml = '<img class="rollover" src="'+image+'" data-alt-src="'+iHover+'" alt="'+rel.fulltitle+'"/>';

Please note that "undefined" is javascripts way of setting it to "empty" (or in your case var x = '')

edited Oct 24 '14 at 10:20

answered Oct 24 '14 at 00:13

L.H

325
1
7

Do you have an example? What exactly do you mean with setting them `undefined`?? – Meules Oct 24 '14 at 00:22
That still gives an empty string or array.. Any other suggestion? – Meules Oct 24 '14 at 00:51
`undefined` is not the same as `null`. And the variable you created will be `undefined` by default. See http://stackoverflow.com/a/5076962/2055998 or http://stackoverflow.com/a/2236186/2055998. – PM 77-1 Oct 24 '14 at 01:24
True undefined is not the same as null - was a mistake putting it like that. – L.H Oct 24 '14 at 10:20
@Meules - actually you are trying to assign the iHover outside of the scope of your 2nd $.getJSON call. If the assignment is outside of the scope, jQuery havent neccesarily loaded the data yet - hence the empty response. Try moving iHover = image2Pic and the return line as well inside the above getJSON section. – L.H Oct 24 '14 at 10:35
@L.H: Thats exactly the problem! I have the main image inside first getJSON and the second image inside second getJSON. The html is build outside the second getJSON. So how do I get the second image to the first getJSON?? – Meules Oct 24 '14 at 11:51
Ohh right. I think the whole problem is caused by the asynchronous call. $.getJSON doesnt support any options but you could use the following to achieve exactly the same here (and disabling the async - see the async = false): $.ajax({ url: myUrl, dataType: 'json', async: false, data: myData, success: function(data) { //stuff //... } }); – L.H Oct 24 '14 at 12:05

score 0 · Answer 2 · answered Oct 24 '14 at 02:16

try this

.getJSON(url, function (data){

... stuff ... 
 $.each(product.related, function(index, rel){
   ... stuff ...

     var image = 'http://cdn.webshopapp.com/i/' + image_id_convert(rel.image) + '/100x150x2/image.jpg'; // this is the main image!!

        var productHtml;
        var iHover = '';           
        $.getJSON(url, function (data){

          var image2 = rel.images[1]; // this needs to be the second image in the json file
          var image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // this is needed to convert a string to an actual link!!

         ... more stuff ...
          });

          iHover = image2Pic;
          productHtml = '<img class="rollover" src="'+image+'" data-alt-src="'+iHover+'"      alt="'+rel.fulltitle+'"/>';

        });

        var

Thats exactly the problem! I have the main image inside first getJSON and the second image inside second getJSON. The html is build outside the second getJSON. So how do I get the second image to the first getJSON?? — Meules, Oct 24 '14 at 11:45

Swap dynamic image with a variable from json call

2 Answers2