Question

This is somewhat pseudo code so EDIT away. I want to make it when the user clicks on a thumb inside #placeholder DIV thumb2 is then displayed inside #imageLoad DIV. NOTE: Thumb and thumb2 are JSON items. A lot of people are saying that this can’t be done with getJSON because it’s an asynchronous request. If that is the case, then how can I change my script to support the request? If I am going the wrong way, please provide alternate solutions.

$.getJSON('jsonFile.json', function (data) {
    var image1 = "<ul>";
    for (var i in data.items) {
        image1 += "<li><img src=images/items/" + data.items[i].thumb + ".jpg></li>";
    }
    image1 += "</ul>";
    document.getElementById("placeholder").innerHTML = output;

    var image2 = "<img src=images/items/" + data.items[i].thumb2 + ".jpg>";
    $('li').click(function () {
        document.getElementById("imageLoad").innerHTML = output;
    });
});

Here is the external JSON file below (jsonFile.json):

{"items":[
    {
        "id":"1",
        "thumb":"01_sm",
        "thumb2":"01_md"
    },
    {
        "id":"2",
        "thumb":"02_sm",
        "thumb2":"02_md"
    }
]}

Answer 1

You can try something like the following:

$.getJSON('jsonFile.json', function(data)
{
  $("#placeholder").html("");
  var ul = $('<ul></ul>');
  $('#placeholder').append(ul);
  var load = $("#imageLoad");

  for(var i in data.items)
  {
    var li = $('<li></li>');
    ul.append(li);
    var img = $('<img>');
    img.attr("src", "images/items/" + data.items[i].thumb + ".jpg");
    img.click((function(x)
    {
      return function()
      {
        load.html("<img src=images/items/" + data.items[x].thumb2 + ".jpg>");
      }
    })(i));
    li.append(img);
  }
});

Main difference is that click-handler is assigned inside the loop, so every handler receives a closure with appropriate reference to thumb2.