循环JSON内容而无需重新加载页面

Question

I have a JSON array(?) of pairs of every state and a value associated with that state, it looks like the following below:

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}]

I need the page to shuffle through them without reloading the page

"AL 6" [wait x seconds] then "AK 3" [wait x seconds] then etc...

I need this to run continuously.

I never use any of these languages but was told that they were my best bet.

Could someone give me some guidance on this please.

Thank you in advance.

Answer 1

Alright, you'd need a function that does the rotation through the array, and a variable for keeping the current state (in both meanings of the word):

var stateIndex = 0;

function rotate() {
    stateIndex++;

    if(stateIndex >= states.length)
        stateIndex = 0;

    displayState(states[stateIndex]);
}

And you'd need an interval to perform the rotation:

var stateRotation = window.setInterval(rotate, 3000); // 3000ms = 3 sec

The stateRotation variable is an identifier of your interval. You may use that if you ever want to stop: window.clearInterval(stateRotation);

Now, the above code anticipates a function displayState which takes a state object and displays it. How that would look depends entirely on how you want your state to displayed. In its simplest form, something like this:

function displayState(state) {
    $('#state-name').html(state.STATE);
    $('#state-amount').html(state.AMOUNT);
}

As per your description, it might perhaps be something more like

$('#state-text').html(state.STATE + ' ' + state.AMOUNT);

Answer 2

Here's a jsfiddle with setInterval execting a function that alternates between each state and displays it in a div:

http://jsfiddle.net/WD5Qj/1/

var states = '[{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}]';

json = jQuery.parseJSON(states);



var i = 0;

var cycle = function(){
  $("#state").html(json[i].STATE + json[i].AMOUNT); 
  i = (i+1)%json.length;
}

var loop = setInterval(cycle, 500);

Answer 3

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}]; 
var i = 0; 
setInterval(function(){ 
  var array_index = i % states.length; 
  $('#state').html( states[ array_index ]['STATE'] );
  $('#state').html( states[ array_index ]['AMOUNT'] );
  i++; 
}, 2000); 

Here's a fiddle .

Answer 4

function displayNextItem(index){
    if (index === states.length) 
         displayNextItem(0);

    $("#someDiv").text(states[index]["STATE"] + " " + states[index]["AMOUNT"]);
    setTimeout(function() { displayNextItem(index + 1); }, 1000);
}

And then

displayNextItem(0);

Answer 5

var i = 0, l = states.length, timer, intervalLength = 5000;
timer = setInterval(function(){
  if(i >= l){
    clearInterval(timer);
  }else{
    alert(states[i++].STATE);
  }
},intervalLength);

Answer 6

This implementation is waiting the AMOUNT number of seconds. If you want constant number of seconds then other answers are better :).

JavaScript:

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}];

function iterate(index) {
  var time = states[index].AMOUNT;

  // replace the text with new one
  $("#output").text(states[index].STATE + " " + time);

  setTimeout(function() {
    var next = (index + 1) % states.length;
    iterate(next);
  }, time * 1000);
}

iterate(0);

HERE is the code.