socket.ioとjqueryを使用して新しいコンテンツを追加する

Question

私のデータベースから最新のデータを取得してHTMLページに追加しようとしています。私はsocket.ioを使って新しいものです。これを行う良い方法があるかどうかわかりません。

私は上の下に、このコードを持っている私の新しいインスタンスは、私は私のデータベースから最新のデータを選択します実行されるたびに、私のindex.htmlに今私のindex.html

socket.on('new instance', function (data) { 
    var query = con.query("SELECT * FROM sales_agent WHERE STR_TO_DATE(hour, '%Y-%m-%d %H:%i')" + 
     " > SUBDATE(CURRENT_TIMESTAMP, INTERVAL 2 HOUR) GROUP BY unq", 
     function (err, rows, result) { 
      if (err) throw err; 
      for (var i in rows) { 
       io.sockets.emit('active charts', { 
        msg: rows[i].product, 
        date: rows[i].date_added, 
        board: rows[i].type 
       }); 
      } 
     }); 
}); 

でそれを放出server.jsときactive charts私は、インスタンスが呼び出され、新たな時に予想されるようにすべてが、最初の負荷で動作chart_content

var $chart = $('#chart_content'); 
socket.on('active charts', function (data) { 
    console.log('Data instance called'); 
    $chart.append('<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="card"><div class="body' + 
     ' bg-blue-grey">' + data.msg + ' ' + data.board + ' </div></div> </div>'); 
}); 

のIDを持つdivにそれを追加しますと呼ばれ、それが再び目を追加します私divで電子同じデータには、私はdiv内部の重複データを持っている私は、最初のdivをクリアするone、remove、load、html、replaceWithのようないくつかのjqueryのメソッドに見てきたが、私はそれがために必要ようにそれは動作しません。

私が考えているのは、divの現在のコンテンツを削除し、appendを使用して新しいものに置き換えてください、これを達成するためのアドバイス、事前に感謝！

Answer 1

var $chart = $('#chart_content'); 
var allData = []; 

function checkIn(data) { 
    for (var i = 0; i < allData.length; i++) { 
     // drop your logic here 
     if (allData[i].msg == data.msg || allData[i].board == data.board) return true; 
    } 
    return false; 
} 

function showData() { 
    $chart.empty(); 
    allData.forEach(function (data) { 
     $chart.append('<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="card"><div class="body' + 
      ' bg-blue-grey">' + data.msg + ' ' + data.board + ' </div></div> </div>'); 
    }); 
} 
socket.on('active charts', function (data) { 
    console.log('Data instance called'); 
    if (!checkIn(data)) { 
     allData.push(data); 
     showData(); 
    } 
}); 

1. その後、
2. が、それはシーンを作るん再び

すべてのデータを追加し、あなたのchat_contentを空

をプッシュしていない場合

チェックデータが

をすでに存在したデータキーパーを作成します？