basic isotope with json

Question

I'm a noob and trying to implement isotope with a JSON feed.

I can get the divs showing with a bad layout, but as soon as I apply the isotope code nothing shows on the page.

Here is the http://jsfiddle.net/ben_beek/ujX5G/

Here is the script:

        $(document).ready(function () {


        $.getJSON("library.json",


        function (data) {

            $.each(data.payload, function (u, v) {

                var string = v.title;
                var urltitle = string.replace(/ /g, '-');
                var desc = v.description;

                if (v.description === null) {
                    var desc = v.title;
                } else {
                    var length = 200;
                    var desc = desc;
                    var desc = desc.substring(0, length);
                    var desc = desc.concat('...');
                }


                $("#container").append('<div class="item"><a href="http://beek.co/guide/' + v.id + '--' + urltitle + '"><img src="http://cdn.beek.co/' + v.thumbName + '" "width="200" height="200" /></a><p    align="center">' + desc + '</p></div>')
            });
        });


        $('#container').isotope({
            itemSelector: '.item',
            layoutMode: 'fitRows'
        });

    });



        $('#container').isotope({
            filter: '.my-selector'
        }, function ($items) {
            var id = this.attr('id'),
                len = $items.length;
            console.log('Isotope has filtered for ' + len + ' items in #' + id);
        });

Anything obvious that could be wrong?

Answer 1

The $.container call was made at the wrong time, needed to be called after the JSON was ready.