use JSON variable in jQuery dynamically

Question

I have two DIVs, #placeholder AND #imageLoad. When the user clicks on a particular thumb its larger version (thumb2) should then appear in #imageLoad DIV.

Here is the jQuery that needs to be fixed:

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


  //This is wrong!! Not working..
  $('li').on({
         mouseenter: function() {
             document.getElementById("imageLoad").innerHTML="<img src=images/items/" +
             data.items[i].thumb2 + ".jpg>";
         }
  });

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"
    }
]}

once you've created the new element (ul) add data to it with the jquery data method. You can then use it wherever you want. http://api.jquery.com/data/ — Luceos, Dec 12 '12 at 10:52
The link makes something complex _seem_ easy. Can you elaborate about the data, how to associate it, or use it with other jQuery functions? — Jim22150, Dec 12 '12 at 17:48

hyankov · Accepted Answer · 2012-12-12T21:18:23.397

1

$.getJSON('jsonFile.json', function(data) {
    var output="<ul>";
    for (var i = 0; i < data.items.length; i++) {
        output += "<li><img thumb2='" + data.items[i].thumb2 + "' src='images/items/" + data.items[i].thumb + ".jpg'></li>";
    }
    output += "</ul>";
    $("#placeholder").html(output);

    $('li').on({
        mouseenter: function() {
            $("#imageLoad").html("<img src='images/items/" + $(this).find('img').attr('thumb2') + ".jpg'>");
        }
    });   
});

edited Dec 12 '12 at 21:18

answered Dec 12 '12 at 10:52

hyankov

4,049
1
29
46

This seems to only make the first 2 items' hovers work. Everything next in the JSON doesn't have working hovers. Any idea why it is only working 2 times? NOTE: I tested, then added more JSON data and tested again. – Jim22150 Dec 12 '12 at 18:39
1

I have updated my answer, I was referencing data.items[i] while I should have referenced i directly. – hyankov Dec 12 '12 at 19:36
The only thing appearing when testing your update is LIST dots without the JSON data. No JSON is appearing. – Jim22150 Dec 12 '12 at 21:12
I don't like this for( .. in ..) loop, changed it to standard for( ; ; ) – hyankov Dec 12 '12 at 21:18
1

It should work now, I've put my code here, it's working (in Firebug console you can see it's trying to load the images, even though they 404, but on your machine it will work) - http://jsfiddle.net/zvmn9/1/ – hyankov Dec 12 '12 at 21:25
It seems to work... But only for the first 2 list items. My JSON file has 4 items. The rest of the items' hovers do not react. Very strange, any idea why this is only triggering 2 items instead of all 4? – Jim22150 Dec 12 '12 at 21:37
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21033/discussion-between-user1644123-and-hristo-yankov) – Jim22150 Dec 12 '12 at 21:39
Great update, this script works perfect. This answer should get many positive votes. One thing I noticed is that there is a quick delay of the image swap when loading the image sometimes. How can the images load more gracefully? – Jim22150 Dec 13 '12 at 03:37

Ravi Y · Answer 2 · 2012-12-12T10:55:26.697

0

Your variable data is declared only within the callback function of your getJSON call and hence it is not available in the other methods/ event handlers. Store it to a global variable when you get it. Like Below:

var globalData;

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


//This is wrong!! Not working..
$('li').on({
     mouseenter: function() {
         var index = parseInt($(this).attr('id').substring(8));
         document.getElementById("imageLoad").innerHTML="<img src=images/items/" +
         globalData.items[index].thumb2 + ".jpg>";
     }
});

edited Dec 12 '12 at 10:55

answered Dec 12 '12 at 10:48

Ravi Y

4,296
2
27
38

this will not work, you have a reference to 'i' in the second code block. – hyankov Dec 12 '12 at 10:50
Ahh yes, Thanks Hristo, have updated the code to include an ID and use the same in the second function. – Ravi Y Dec 12 '12 at 10:52
how can I reuse 'i' as a reference? Or what can I do different to have the mouseEnter working? Thanks in advance. – Jim22150 Dec 12 '12 at 10:52
Please see updated code. I have used I as an ID over there. So you can extract the i value from there and use it. I will update my answer to use a more solid ID. – Ravi Y Dec 12 '12 at 10:53
This will work now, but you don't really need a global variable to store the data. Just store the other thumbnail as an attribute to the as per my example. – hyankov Dec 12 '12 at 10:55

score 0 · Answer 3 · edited Jan 25 '14 at 21:46

0

Firstly, $.getJSON is asynchronous, so the binding of mouseenter following the async function will not work as the li elements does not exist when you attach the event handler. Secondly, store the second image source in a data attribute on each li element, and just retrieve that data attribute in the mouseenter function:

$.getJSON('jsonFile.json', function(data) {
    var out = $("<ul />");
    for (var i in data.items) {
        $('<li />', {
            src: 'images/items/' + data.items[i].thumb + '.jpg'
        }).data('big', data.items[i].thumb2).appendTo(out);
    }
    $("#placeholder").html(out);
});

$('#placeholder').on('mouseenter', 'li', function() {
    var bigImg = $('<img />', {
        src: 'images/items/' + $(this).data('big') + '.jpg'
    });
    $("#imageLoad").html(bigImg);
});

edited Jan 25 '14 at 21:46

BenMorel

34,448
50
182
322

answered Dec 12 '12 at 11:01

adeneo

312,895
29
395
388

All three of you guys answers seem to not be working. Adeneo, can you suggest another solution? I know nothing about AJAX, but perhaps I need to declare Async:false?? I'm very confused but I know this is a simple task. Any input would be great, thanks! – Jim22150 Dec 12 '12 at 11:22
@user1644123 I have updated my code (in my own answer) to have the $('li').on() event within the callback of the AJAX invocation, so it should work now, give it a try. – hyankov Dec 12 '12 at 17:54
I tested your update Hristo, and now no JSON data is displayed. – Jim22150 Dec 12 '12 at 21:13

use JSON variable in jQuery dynamically

3 Answers3