Use Json Data Outside Of Initial .ajax Call - Access Leftover Json Data

This is partly an extension to a Previous Question of mine: I can now successfully returned JSON data from my CI controller which returns: {'results':[{'id':'1','Source':'My Source

Solution 1:

I think you can just store your json in a global variable, and loop through the items as you need them, starting with 20 by calling setDivs(20) after successfully loading the json.

// Declaration of global variables
data = ''; // JSON data will be stored here
myurl = 'http://localhost/project/index.php/controller/outputAjax';
index = 0;

$(document).ready(function () {
    $.getJSON(myurl, function (JSON) { data = JSON; setDivs(20); });
    $('#next20').click(function() { setDivs(20); });
});

functionsetDivs(num) {
    $("#masonry-content").empty();
    for (var i = index ; i < index + num -1; i++) {
        $("#masonry-content").append('<div class="item" ' + data["results"][i].id + data["results"][i].Title + ' ... </div>');
    }
    index += num;
}

I've also added code which will update your #masonry-content element with the next 20 divs from the json object upon clicking a #next20 element on the page.

Of course, I've no idea if your #masonry-content element is empty to begin with. If it's not, then add something like a <div id="json-data"></div> inside your #masonry-content element, and update the above code accordingly by replacing both instances of $('#masonry-content") with $('#json-data')

If data["results"][i] doesn't work, maybe try data.results[i].

If you are using Chrome, pull up the console (CTRL+SHIFT+J) and type data and press enter. If the JSON was successfully loaded, you should be able to explore the tree of the data object. Then you can play around with it in the console, trying data["results"], data.results etc. and keep working your way down (i.e. try data["results"][0] and verify that it pulls the first item).

Update:

Here's a working JSON/AJAX Ticker example which randomly swaps items every 4.5 seconds. It was built in response to twhyler's follow-up question on stackoverflow.

Solution 2:

You could, simply declare a variable outside of your ajax call then inside your ajax function the update the variables value to the json object in its entirety. See below I named the variable data

$(document).ready(function()
        {

         var data = '';

            $.ajax(
            {
                url: 'http://localhost/project/index.php/controller/outputAjax',
                dataType:'json',
                success: function(data) 
                {   

                    data = data;

                    });

However I would personally create a template div of how you want an individual element to appear and then just fill in the data rather than trying to search specific tags in 20 places and then replacing that data with new data. I think it would be much easier and efficient to basically empty $("#masonry-content").empty(); Then refill it with the new elements using append or something like that.