Question

The base fiddle is here for more context.

That example shows only three elements but there will be many so I want to use a separate JSON file and automatically populate the <ul> with <li> items.

I used this code to create the HTML in the fiddle along with the JSON below it.

$.getJSON('tdata.json',
    function(data){
      $.each(data.Users, function(i,Users){
      $('#tumblrlist').append("<li class=\"tumblr pbs " + Users.tumblrClass + "\" style=\"width:132px; height: 132px;\" ><div class= \"" + Users.tumblrClass + "\" ><a href=\"/t1.html?t=" + Users.tumblr + "\" rel=\"external\" ><img  src=\"http://api.tumblr.com/v2/blog/" + Users.tumblr + ".tumblr.com/avatar/128/ \" title=\""+ Users.tumblrTitle + "\" alt=\"" + Users.tumblrTitle + "\"></a></div><span class=\"tumblrName\">" + Users.tumblrTitle + "</span></li>");
      });
    });

The external JSON file looks like this (it is well-formed and no problems generating the HTML):

{"Users":[
        {
            "tumblr":"pbstv",
            "tumblrImage":"pbstv",
            "tumblrTitle":"PBS & Tumblr",
            "tumblrClass": "pbs"

        }, ...

The problem is that I am forced to manually create the HTML using this code and paste it into the <ul> for Isotope to operate properly. I have run into various errors including empty <ul>s, 0px height containers, and <li>s that don’t get the proper Isotope markup.

I cannot get this coded after way too many attempts I will confess to. I thought it would be easy enough to get the JSON data, create the elements, and use Isotope.

I’m hoping that you wizards can solve the problem.

Answer 1

Solved it myself.

Here’s the solution in case someone else encounters same situation:

    $('#one').live( 'pageinit', function(event){

    myNewFunction();

    });

myNewFunction needs to include the getJSON stuff plus all of the Isotope stuff.

NB: The Isotope code needs to be placed after the first }); and before the last }); in the getJSON block.

Then, everything is wrapped in myNewFunction which resides in a separate file.

Now, I only need to edit a single JSON file for additions, revisions, and deletions.

Works nicely.