Getting JSON from PHP using jQuery into table without appending

Question

Alright, so I feel like a bit of a doof here... but I had been having problems with AJAX getting data from a PHP-coded JSON page. After figuring out the right combination of PHP code and jQuery code, I now have a working product... Almost!

The problem here is getting new results to populate without repeating the existing data. I know it is because I am using the tr.append method.

This is the doof part:

I don't know the proper way of iterating the rows from the JSON page but do not repeat the results on each check, or how to 'translate' my code into that.

Here is the PHP code:

$sth = mysql_query("SELECT * FROM incidents2014 ORDER by id DESC LIMIT 5");
$rows = array();
while($r=mysql_fetch_assoc($sth)){
  $rows[]=$r;
}
$b=json_encode($rows, JSON_HEX_TAG);
echo $b;

The JSON output:

[{"id":"1","date":"date1","time":"time1","city":"city1","fire":"fire1","addy":"addy1","level":"level1","desc":"desc1","ipaddress":"ip1","who":"who1","last_update":"lu1","RSS_time":"rss1","lat":"","lng":""},
{"id":"2","date":"date2","time":"time2","city":"city2","fire":"fire2","addy":"addy2","level":"level2","desc":"desc2","ipaddress":"ip2","who":"who2","last_update":"lu2","RSS_time":"rss2",lat":"","lng":""},

etc...]

The jQuery Code:

$(document).ready(function get(){
  $.getJSON('jsontest1.php',
  function (json){
    var tr;
    for (var i = 0; i < json.length; i++){
      tr = $('<tr/>');
      tr.append("<td id='id'>" + json[i].id + "</td>");
      tr.append("<td id='date'>" + json[i].date + "</td>");
      tr.append("<td id='time'>" + json[i].time + "</td>");
      tr.append("<td id='city'>" + json[i].city + "</td>");
      tr.append("<td id='fire'>" + json[i].fire + "</td>");
      tr.append("<td id='level'>" + json[i].level + "</td>");
      tr.append("<td id='desc'>" + json[i].desc + "</td>");
      tr.append("<td id='addy'>" + json[i].addy + "</td>");
      tr.append("<td id='who'>" + json[i].who + "</td>");
      $('table').append(tr);
    }
  });
  }
//  setInterval(get,3000);
});

The result looks like it should, but the grouping of the above rows repeats itself ever 3 seconds (if uncommented).

I would appreciate any and all help!!!

Thank you!!! - Tim

Answer 1

with a setInverval, it's just going to keep repeating your ajax call, and your success function will just keep appending every 3 seconds like you've told it to do. You need some sort of check, whether your table already has that row. You could put the id into the tr as a way to check... then, you could just update the text if it already exists, or append it, if it doesn't. Also, I changed your ids to classes since they will be used multiple times

$(document).ready(function get(){
$.getJSON('jsontest1.php',
function (json){
var tr;
for (var i = 0; i < json.length; i++){
  var tr = $('#+'json[i].id);
  if(tr.length){
    tr.find('.id').text(json[i].id);
    tr.find('.date').text(json[i].date);
    tr.find('.time').text(json[i].time);
    tr.find('.city').text(json[i].city);
    tr.find('.fire').text(json[i].fire);
    tr.find('.level').text(json[i].level);
    tr.find('.desc').text(json[i].desc);
    tr.find('.addy').text(json[i].addy);
    tr.find('.who').text(json[i].who);
   }
  else {
    tr = $('<tr id='+json[i].id+'/>');
    tr.append("<td class='id'>" + json[i].id + "</td>");
    tr.append("<td class='date'>" + json[i].date + "</td>");
    tr.append("<td class='time'>" + json[i].time + "</td>");
    tr.append("<td class='city'>" + json[i].city + "</td>");
    tr.append("<td class='fire'>" + json[i].fire + "</td>");
    tr.append("<td class='level'>" + json[i].level + "</td>");
    tr.append("<td class='desc'>" + json[i].desc + "</td>");
    tr.append("<td class='addy'>" + json[i].addy + "</td>");
    tr.append("<td class='who'>" + json[i].who + "</td>");
    $('table').append(tr);
  }
}
});
}
setInterval(callAjax,3000);
});

Answer 2

Try something like this:

$(document).ready(function get(){
var check = 0;
$.getJSON('jsontest1.php',
function (json){
var tr;
if(check != json[i].id){
for (var i = 0; i < json.length; i++){
  tr = $('<tr/>');
  tr.append("<td id='id'>" + json[i].id + "</td>");
  tr.append("<td id='date'>" + json[i].date + "</td>");
  tr.append("<td id='time'>" + json[i].time + "</td>");
  tr.append("<td id='city'>" + json[i].city + "</td>");
  tr.append("<td id='fire'>" + json[i].fire + "</td>");
  tr.append("<td id='level'>" + json[i].level + "</td>");
  tr.append("<td id='desc'>" + json[i].desc + "</td>");
  tr.append("<td id='addy'>" + json[i].addy + "</td>");
  tr.append("<td id='who'>" + json[i].who + "</td>");
  $('table').append(tr);
  check = json[i].id;
}
}
});
}
setInterval(get,3000);
});

Answer 3

You can check the last ID and send it to php to fetch all records bigger than that.

JS:

$(document).ready(function get(){
      latestID = $('table tr:last td:first').text();
      $.getJSON('jsontest1.php?id='+latestID,
      function (json){
        var tr;
        for (var i = 0; i < json.length; i++){
          tr = $('<tr/>');
          tr.append("<td id='id'>" + json[i].id + "</td>");
          tr.append("<td id='date'>" + json[i].date + "</td>");
          tr.append("<td id='time'>" + json[i].time + "</td>");
          tr.append("<td id='city'>" + json[i].city + "</td>");
          tr.append("<td id='fire'>" + json[i].fire + "</td>");
          tr.append("<td id='level'>" + json[i].level + "</td>");
          tr.append("<td id='desc'>" + json[i].desc + "</td>");
          tr.append("<td id='addy'>" + json[i].addy + "</td>");
          tr.append("<td id='who'>" + json[i].who + "</td>");
          $('table').append(tr);
        }
      });
      }
      setInterval(callAjax,3000);
    });

PHP:

$sth = mysql_query("SELECT * FROM incidents2014 WHERE id > ".$_GET['id']." ORDER by id DESC LIMIT 5");
$rows = array();
while($r=mysql_fetch_assoc($sth)){
  $rows[]=$r;
}
$b=json_encode($rows, JSON_HEX_TAG);
echo $b;

Other way of doing is you can check it all the data in frontEnd with a little help of isInArray function which i found here: How do I check if an array includes an object in JavaScript?

var IDs = [];
  $('table tr').each(function(){
      IDs.push($(this).find('td:first').text());
  });

  $.getJSON('jsontest1.php',
          function (json){
            var tr;
            for (var i = 0; i < json.length; i++){
              if(!isInArray(IDs, json[i].id)){
                  tr = $('<tr/>');
                  tr.append("<td id='id'>" + json[i].id + "</td>");
                  tr.append("<td id='date'>" + json[i].date + "</td>");
                  tr.append("<td id='time'>" + json[i].time + "</td>");
                  tr.append("<td id='city'>" + json[i].city + "</td>");
                  tr.append("<td id='fire'>" + json[i].fire + "</td>");
                  tr.append("<td id='level'>" + json[i].level + "</td>");
                  tr.append("<td id='desc'>" + json[i].desc + "</td>");
                  tr.append("<td id='addy'>" + json[i].addy + "</td>");
                  tr.append("<td id='who'>" + json[i].who + "</td>");
              }
              $('table').append(tr);
            }
          });
          }
     setInterval(callAjax,3000);});