Displaying random JSON data - json

Question

I have this code that displays JSON data. How could this code be remade to display random JSON data every 30 seconds?
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();
Here is an example of JSON
{
"data": [
{
"data":"John",
"data2": "Doe"
},
{
"data":"Nick",
"data2": "Doe"
},
]
}
How would it be best to use with setInterval, so that one minute "John Doe" is displayed, and other "Nick Doe"?

Answer 1

create a setInterval to call your logic every 30secs. Set index=0 initially and reset when it equals to your json's length.
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();