顯示隨機JSON數據

Question

我有這段顯示JSON數據的代碼。 如何重新制作此代碼以每30秒顯示隨機JSON數據？

    var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(xhttp.responseText);
        var data= response.data;

        var output = '';
       for(var i = 0;i < data.length;i++){ 
         output += ''+data[0].data1+''+data[0].data2+'<br/>';
       }
        document.getElementById('placeholder').innerHTML = output;
      }
  };
  xhttp.open("GET", "url.json", true);
  xhttp.send();

這是JSON的示例

{
  "data": [
    {
      "data":"John",
      "data2": "Doe"
    },
    {
      "data":"Nick",
      "data2": "Doe"
    },
  ]
}

最好與setInterval一起使用，以便顯示一分鍾的“ John Doe”和其他的“ Nick Doe”？

Answer 1

創建一個setInterval以每30秒調用一次邏輯。 初始設置index=0並在等於您的json長度時重置。

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(xhttp.responseText);
        var data= response.data;

        var output = '';
        var index = 0; // set your index
     setInterval(function(){
        if (index == data.length){
            index= 0; // reset when equals json's length
        }
        output = ''+data[index].data1+''+data[index].data2+'<br/>';
        document.getElementById('placeholder').innerHTML = output;
        index++; // move to next element
     },30000);

      }
  };
  xhttp.open("GET", "url.json", true);
  xhttp.send();