CODEWITHSUNDEEP
javascriptjqueryjsonhtml
ndesign11
ndesign11

Reputation: 1779

JSON broke my script but it still pulls in the data

I have a little gallery plugin that I had to make JSON capable. I was successful in pulling in the data but the script no longer functions as it should. Once the data is loaded clicking on a thumbnail should expand a description area.

I think the js is trying to run before the json has loaded content into the page. It's like I need some kind of .on() functionality that is not event based waiting for a click.

entire js fiddle http://jsfiddle.net/xM386/

here is my json call

$().ready(function () {
$.getJSON('assets/js/json/demo.json', function (data) {
    //Collection of li elements
    var $items = [];

    $.each(data, function (key, val) {
        $items.push('<li><a href="#" data-title="Veggies sunt bona vobis" data-largesrc="' + val.image + '" data-description="dd"><img src="' + val.image + '" /><div class="gh"><span> ' + val.VideoTitle + '</span></div></a></li>');
    });

    $('<ul/>', {
        'class': 'og-grid da-thumbs',
        'id': 'og-grid',
        html: $items.join('')
        }).appendTo('#myGrid');
    });

});

$(function () {
    Grid.init();
});


var Grid = (function() {

    // list of items
var $grid = $( '#og-grid' ),
    // the items
    $items = $grid.children( 'li' ),
    // current expanded item's index
    current = -1,
    // position (top) of the expanded item
    // used to know if the preview will expand in a different row
    previewPos = -1,
    // extra amount of pixels to scroll the window
    scrollExtra = 0,
    // extra margin when expanded (between preview overlay and the next items)
    marginExpanded = 10,
    $window = $( window ), winsize,
    $body = $( 'html, body' ),
    // transitionend events
    transEndEventNames = {
        'WebkitTransition' : 'webkitTransitionEnd',
        'MozTransition' : 'transitionend',
        'OTransition' : 'oTransitionEnd',
        'msTransition' : 'MSTransitionEnd',
        'transition' : 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    // support for csstransitions
    support = Modernizr.csstransitions,
    // default settings
    settings = {
        minHeight : 500,
        speed : 350,
        easing : 'ease'
    };

Upvotes: 0

Views: 122

Answers (1)

user115014
user115014

Reputation: 922

Put code that depends on the json in the done callback (.done()).

This will then execute once the data has successfully been received. You might need to do further checks to see that the data is not empty as the callback will run even if it is. (I think it only fails on load or formatting errors).

I've not changed the code you've added here except putting it inside the done callback.

$.getJSON('assets/js/json/demo.json')
    .done(function(data) {

      // Should probably do more checks here

      //Collection of li elements
      var $items = [];

      $.each(data, function (key, val) {
          $items.push('<li><a href="#" data-title="Veggies sunt bona vobis" data-largesrc="' + val.image + '" data-description="dd"><img src="' + val.image + '" /><div class="gh"><span> ' + val.VideoTitle + '</span></div></a></li>');
      });

      $('<ul/>', {
          'class': 'og-grid da-thumbs',
          'id': 'og-grid',
          html: $items.join('')
        }).appendTo('#myGrid');
    });

});

Because of Uncaught ReferenceError: data is not defined errors I've double checked this is working with a version of code.

This is working:

(function() {

  var flickerAPI = "https://spreadsheets.google.com/feeds/list/o13394135408524254648.240766968415752635/od6/public/values?alt=json";

  $.getJSON(flickerAPI)
    .done(function( data ) {
      $.each(data.feed.entry, function(key, val) {
        console.log(val.title.$t)
    });
  });

})();

Upvotes: 2

Related Questions