CODEWITHSUNDEEP
jqueryarrayssortingfiltergallery
rpsep2
rpsep2

Reputation: 3111

jquery - select / filter items in an array

I have an image gallery that id like to be able to sort by album.

I have an array like :

var images_gallery = [
    {
        image_src: "images/xmas-1.jpg",
        album: "xmas"
    },
    {
        image_src: "images/xmas-2.jpg",
        album: "xmas"
    },
    {
        image_src: "images/xmas-3.jpg",
        album: "xmas"
    },
    {
        image_src: "images/xmas-4.jpg",
         album: "summer"
    }
]

i also have a select in my html:

   <select name="album">
        <option selected="selected" id="all">All</option>
        <option id="xmas">Xmas Party</option>
        <option id="summer">Summer Party</option>
    </select>

and then this in my js file:

$("select[name='album']").change(function() {
    var thisAlbum = $(this).children(":selected").attr("id");
});

my question is, how do I filter my array by album that matches my select options id (and then display them, which I have a function for (showImages) ).

EDIT:

using the answers below ive gotten here:

$("select[name='album']").change(function() {
    var thisAlbum = $(this).children(":selected").attr("id");

    var filteredArray = images_gallery.filter(function(x) {
        return x.album == thisAlbum;
    });

    $('#librarian-page-container-gallery').html(' ');

    Shadowbox.setup("a.gallery", {
        gallery:   "gallery",
    });

    filteredArray.showImages2();


});

im not sure how to apply my function to the new filtered array though?

my function looks like:

function showImages2(){
$.each(images_gallery,function(i,image_gallery){
           // stuff in here
    });
}

thanks for your help so far!

Upvotes: 0

Views: 462

Answers (3)

voigtan
voigtan

Reputation: 9031

if you want to use jQuery you could use .grep:

var filterArray = $.grep(images_gallery, function(obj) {
    return obj.album === thisAlbum;
});

did a change on thisAlbum if its 'all' then get all objects in the array: http://jsfiddle.net/4tEz4/

var filterArray = $.grep(images_gallery, function(obj) {
    return thisAlbum === 'all' || obj.album === thisAlbum;
});

or just:

var filterArray = thisAlbum === 'all' ? images_gallery : $.grep(images_gallery, function(obj) {
    return obj.album === thisAlbum;
});

Upvotes: 0

XCS
XCS

Reputation: 28157

Using David's answer to filter the results.

$("select[name='album']").change(function() {
    var thisAlbum = $(this).children(":selected").attr("id");
    var result = images_gallery.filter(function(x) {
       return x.album == thisAlbum;
    });
    //Clear images
    $('#images').html(' ');
    //Show images in new result array
    for(img in result){
        $('#images').append('<img src="' + result[img].image_src + '" />');
    }
});

http://jsfiddle.net/vyaTC/1/

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129802

You can filter your array using filter:

var filteredArray = images_array.filter(function(x) {
   return x.album == thisAlbum;
});

Here's a shim for support in older browsers.

Upvotes: 1

Related Questions