How can I print keys from json on my page one by one?
I wrote the following PHP code:
$q3 = $conn3->prepare("SELECT c.text as key1, c.timeframe as key2, p.date as key3 FROM table1 c, table2 p WHERE c.id = p.c_id");
$q3->execute();
if ($q3->rowCount() > 0)
{
$check3 = $q3->fetchAll(PDO::FETCH_ASSOC);
$arr = array();
foreach ($check3 as $row) {
$arr[] = $row;
}
echo json_encode(array('result'=>$arr));
}
and returns a json string in the form:
{
"result": [{
"key1": "aa",
"key2": "15",
"key3": "2015-04-12 18:50:00"
}, {
"key1": "bb",
"key2": "30",
"key3": "2015-05-09 11:26:38"
}, {
"key1": "cc",
"key2": "45",
"key3": "2015-04-12 18:50:20"
},
etc .. Now I want this result to be printed on another web page, so first I included the following script in it:
<script type="text/javascript">
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
console.log(subresult);
});
});
}
var interval = setInterval(function () {
myFunction();
}, 60000);
</script>
and after running this webpage I see the results in the console - every minute I call the getJSON method and print the returned results to the console. So I basically see the json string in the console. However, I would like to print each line on a web page one by one - in the same div, for example. fade in / fade out effect. For the example above, I would like to see "aa"
for 15 seconds, then "bb"
30 seconds, and then "cc"
45 seconds (the duration is stored as the value of key2).
I added this interval because after one minute I want to get other data from mysql database and also print old data instead of it, etc. Can you help me? Thank!
source to share
Here's a solution for you:
<script type="text/javascript">
var results;
var cursor = 0;
function myFunction () {
$.getJSON('list.php', function(json) {
results = json.result;
cursor = 0;
// Now start printing
printNext();
});
}
function printNext(){
if(cursor == results.length){
// Reset the cursor back to the beginning.
cursor = 0;
}
// Print the key1 in the div.
$('#divTarget').html(results[cursor].key1);
// Set a delay for the current item to stay
// Delay is key2 * 1000 seconds
setTimeout(function(){
printNext();
}, results[cursor].key2 * 1000);
// Advance the cursor.
cursor++;
}
var interval = setInterval(function () {
myFunction();
}, 60000);
</script>
source to share
I am creating a demo div where you can add the result one at a time for each object
<script>
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
$("#demodiv").append(subresult);
});
});
}
var interval = setInterval(function () { myFunction(); }, 60000);
</script>
<body>
<div id="demodiv" ></div><!-- This is the div where the result will be appended -->
</body>
Edited: as per your requirement:
k = 1; //these are global variables
multi = 15;
times = '';
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
$("#demodiv").append(subresult);
times = multi*k;
k++;
});
});
}
var interval = setInterval(function () { myFunction(); }, times);
source to share
Change your code:
<script type="text/javascript">
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
$("#divId").append(subresult);
});
});
}
var interval = setInterval(function () { myFunction(); }, 60000);
</script>
source to share