print data with getJSON and loop

Question

I receive some data (JSON encoded) from a PHP script using $.getJSON. It consists of 10 datasets ({"key":"data",...}). I want to print all data by first fading out the old sting, then replacing it with the new one and finally fading it in. That shall happen within a loop.

When the dataset is processed, the function calls itself and gets the next 10 datasets to print them. And so on.

function getText(){

    $.getJSON("getText.php",
        function(data){
            for(key in data){
                //alert(key);
                if($("#wrapper").css("display") == "block")
                    $("#wrapper").fadeOut(500);

                $("#wrapper").html(data[key]).fadeIn(500); 
            }
    });
    //alert("end");

    setTimeout(function(){
        getText();
    },20000);
}

With some alerts the right datasets are shown, but without them just the last or first data from the dataset is displayed.Can someone help me please?!

Simplified there's just one div (#wrapper). After the page has loaded and showed some info the function getText ist called the first time. Now the PHP script is called and we receive ten datasets. Each of those shall be displayed before the function calls itself again. For example: fade in wrapper, show data #1, fade out wrapper; fade in wrapper, show data #2, fade out wrapper, and so on till every data (out of ten) ist showed. The loop should somehow wait for the animations. And the text in the wrapper shall be replaced.

Liam Bailey · Accepted Answer · 2012-05-18 18:42:02Z

1

Given your update try this:

function getText(){
var storage = {};
$("#wrapper").html('').fadeOut(500);
    $.getJSON("getText.php",
        function(data){
        storage.data = data;
                    });
     for (var i in storage.data)
      {
          $("#wrapper").html(storage.data[i]).fadeIn(500).delay(5000).fadeOut(500);
          if (i == storage.data.length-1)
          {
              setTimeout(function(){
                 getText();
              },50000);
          }
      }
}

OR

setInterval('getText',20000);
function getText(){
    var storage = {};
       $.getJSON("getText.php",
            function(data){
            i = (typeof(storage.i) != "undefined") ? storage.i : 0;
         setInterval(function() {
              $("#wrapper").fadeOut(500).html(storage.data[i]).fadeIn(500);
storage.i = i+1;
},2000);

          });
    }

edited May 18, 2012 at 18:42

answered May 13, 2012 at 10:42

Liam Bailey

5,9053 gold badges37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thrukal Over a year ago

Sorry, that's not exactly what I imagined. Simplified there's just one div (#wrapper). After the page has loaded and showed some info the function getText ist called the first time. Now the PHP script is called and we receive ten datasets. Each of those shall be displayed before the function calls itself again. For example: fade in wrapper, show data #1, fade out wrapper; fade in wrapper, show data #2, fade out wrapper, and so on till every data (out of ten) ist showed. The loop should somehow wait for the animations. And the text in the wrapper shall be replaced. Thanks for the help so far :)

Javaguru · Accepted Answer · 2012-05-14 08:39:05Z

0

So then, I think, this is +/- what you're looking for ..

function getText(){
    $.getJSON("getText.php", function(data) {
       var keys = [];
       for(var key in data){
          keys.push(key);
       }

       function displayData() {
          var key = keys.pop();
          $("#wrapper").html(data[key]).fadeIn(500, function(){
             if(keys.length>0) {
                // Still some data available ..
                displayData();
             } else {
                // All data has been displayed .. get some new from server ..
                getText();
             }
          });
       }

       // If some data is available, show first ..
       if(keys.length>0) {
          displayData();
       }
   }); 
}

edited May 14, 2012 at 8:39

answered May 13, 2012 at 10:34

Javaguru

9105 silver badges10 bronze badges

1 Comment

Thrukal Over a year ago

Yes, that's right. It shall even be replaced. Ist should just one dataset be visible at the same time. Then it should fade out and an other dataset should fade in. For that I want the loop to wait. I hope you know, what I mean.

Collectives™ on Stack Overflow

print data with getJSON and loop

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related