Dynamic Json jquery multi-level image gallery

Question

I'm building the site with multi-level image gallery. I use json to store the data: it looks like this:

{
   "fashion":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"FashionAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"FashionSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"FashionSubFolder1Img2"
            }
         ]
      }
   ],
   "beauty":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"BeautyAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"BeautySubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"BeautySubFolder1Img2"
            }
         ]
      }
   ],
   "wedding":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"WeddingAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"WeddingSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"WeddingSubFolder1Img2"
            }
         ]
      }
   ]
}

I can't find the way how to choose the right category. Let's say user clicks on the beauty, so I need to choose "beauty" section, I use this function :

$.getJSON("data/data.json", function(data) {
    $.each(data.beauty, function(i, data) {
        var img = "<li><img class='" + data.class + "' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumsList").append(img);
    });
});

I need to make it dynamic. I tried to insert a variable that holds the category, instead of "beauty" in line:

 $.each(data.beauty, function (i, data)

But it doesn't work, or I did it in the wrong way. Is there any way how I can make it dynamic,maybe my json file is not correct for such needs?

And the second thing, when the user chooses the album,("beauty" section) I want to show all pictures that inside this album.

$.getJSON("data/data.json", function(data) {
    $.each(data.beauty[0].album, function(i, data) {
        var img = "<li><img ' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumPhotosList").append(img).hide().fadeIn(500);
    });
});

But the problem is the same, I need it to be dynamic.

I would very appreciate your help.I got really stacked. Thank you vary much!

does your js console reports any error on the first snippet you tried? — Fabrizio Calderan, Oct 18 '12 at 12:12
Just googled and try using following http://stackoverflow.com/questions/5189387/how-do-i-loop-through-deeply-nested-properties-of-a-json-object — Jaswinder Singh Narula, Oct 18 '12 at 12:16

Sang Suantak · Accepted Answer · 2012-10-18T12:36:46.560

For the first problem, when the user clicks the link you can pass the link text (or through custom attribute) the json property to look for. E.g., let's say your links look like this:

<a href="#" data-jsonproperty="fashion">Fashion</a>
<a href="#" data-jsonproperty="beauty">Beauty</a>
<a href="#" data-jsonproperty="wedding">Wedding</a>

For the first problem, you could write your script like this:

$(".link").click(function() {
    var jsonProperty = $(this).data("jsonproperty");
    $.getJSON("data/data.json", function(data) {
        $.each(data[jsonProperty], function(i, data) {
            var img = "<li><img class='" + data.class + "' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
            $(".albumsList").append(img);
        });
    });
});

You can solve the second problem similarly:

$.getJSON("data/data.json", function(data) {
    $.each(data[jsonProperty][0].album, function(i, data) {
        var img = "<li><img ' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumPhotosList").append(img).hide().fadeIn(500);
    });
});

Dynamic Json jquery multi-level image gallery

1 Answers1