Looping над содержимым JSON без перезагрузки страницы

Question

У меня есть массив JSON пар каждого государства и значение, связанное с этим состоянием, он выглядит следующим образом ниже (?):

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

мне нужно страница перетасовать через них без перезагрузки страницы

«AL 6» [ожидание х секунд], а затем «АК 3» [ждать х секунд] и т.д ...

мне это нужно, чтобы работать непрерывно.

Я никогда не использую ни один из этих языков, но мне сказали, что это мой лучший выбор.

Не могли бы вы дать мне некоторые рекомендации по этому поводу.

Заранее спасибо.

Answer 1

Вот jsfiddle с setInterval execting функцию, которая чередуется между каждым состоянием и отображает его в 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 2

Хорошо, что ты нужна функция, которая делает поворот через массив и переменную для хранения текущего состояния (в обоих смыслах этого слова):

var stateIndex = 0; 

function rotate() { 
    stateIndex++; 

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

    displayState(states[stateIndex]); 
} 

И ты нужен интервал для выполнения поворота:

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

переменная stateRotation является идентификатором вашего интервала. Вы можете использовать это, если хотите остановиться: window.clearInterval(stateRotation);

Теперь приведенный выше код предполагает функцию displayState, которая берет объект состояния и отображает его. Как это будет выглядеть, все зависит от того, как вы хотите, чтобы ваше состояние отображалось. В своей простейшей форме, что-то вроде этого:

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

По вашему описанию, это могло бы, возможно, что-то больше похоже на

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

Answer 3

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

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

А потом

displayNextItem(0); 

Answer 4

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

Answer 5

Эта реализация ожидает AMOUNT секунд. Если вы хотите постоянное количество секунд, тогда другие ответы лучше :).

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 является кодом.

Answer 6

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); 

Адрес fiddle.