Hey there, I managed to solve the issue you were facing.
Here's a snippet of the code you shared with me:
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("demonew2.json",function(data){
$.each(data,function(key,value){
$("#topmost").append('<div>'+key+'</div>');
if(data.hasOwnProperty(key)){
//alert(key);
var total = new Array();
for(var i=0; i<4; i++){ // Here 4 should be something like counts of the keys, as in this json file it is 4
total[i] = key;
$("#topmost").append('<div>'+total+'</div>');
setInterval (function(){alert(key)},5000);
// I NEED THE DATA TO BE LOADED KEY BY KEY, SAY AFTER PAGE LOAD IT WILL DISPLAY THE VALUES OF key_1, THEN AFTER 5 SECONDS<br />
// IT SHOULD DISPLAY key_2 VALUES AND SO ON.
}
}
});
});
});
</script>
</head>
<body>
<div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>
I identified two main issues in your code:
1) If you want to delay a job, you should use "setTimeout" instead of "setInterval" which repeats the job at a set interval.
2) Using the same delay amount for all jobs will make them execute almost simultaneously, so it's better to increase the delay.
Moreover, directly passing values to setTimeout or setInterval can cause unexpected behaviors due to cross-thread value injections. It's recommended to use a proxy function to avoid direct injection. Here's the updated working code:
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("demonew2.json", function (data) {
var delay = 0;
$.each(data, function (key, value) {
delay += 5000;
showData(key, value, delay);
});
});
});
function showData(key, value, delay) {
setTimeout(function () {
$("#topmost").append('<div>' + key + " = " + JSON.stringify(value) + '</div>');
}, delay);
}
</script>
</head>
<body>
<div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>
Let me know if this resolves your issue.
Enjoy! ;)
Update:
I've included the full page code for easier usage, and made a slight adjustment to the append section to add a fade effect and make it more interesting:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("demonew2.json", function (data) {
var delay = 0;
$.each(data, function (key, value) {
delay += 5000;
showData(key, value, delay);
});
});
});
function showData(key, value, delay) {
setTimeout(function () {
$("#topmost").fadeOut(function() {
$("#topmost").append('<div>' + key + " = " + JSON.stringify(value) + '</div>').fadeIn();
});
}, delay);
}
</script>
</head>
<body>
<div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>
</html>