Ajaxレスポンスをフィルタリングし、最後のレスポンスに追加するにはどうすればいいですか？

Question

サーバーから送信されたIDに基づいて応答をフィルタリングし、最後の応答に追加する方法。

コードを入力して質問を説明してください。

私のjqueryの

baseURL = 'http://192.168.23.110'; 

if ($('body').is('#body__page1')) { 

var pFilter; 

// First Ajax on document load 
$.ajax({ 
    url: baseURL + '/page1/', 
    type: "GET", 
    dataType: 'json', 
    async: false, 
    success: function(response) { 
     var total = 0; 
     $.each(response.id, function() { 
      total += parseInt(this, 10); 
     }); 
     var pvalue = response.sort(function(a, b) { 
      return (b.id - a.id); 
     }); 

     pFilter = dvalue[1].time; 

     $.each(pvalue, function(key, value) { 
      $('#page1__view').append('<li> <a href="#!"> <h3>' + value.username + '</h3> </a> </li>'); 
     }); 

    }, 
    error: function(xhr, err) { 
     console.log(xhr.readyState); 
     console.log(xhr.status); 
     console.log(xhr.responseText); 
    }, 
    complete: function(xhr, status) { 
     console.log(xhr.status); 
    } 
}); 

//Second Ajax on button click 
$('#page1__refresh').on('click', function() { 
    $.ajax({ 
     url: baseURL + '/page1/?filter=' + pFilter, 
     type: "GET", 
     dataType: 'json', 
     success: function(response) { 
      var total = 0; 
      $.each(response.id, function() { 
       total += parseInt(this, 10); 
      }); 
      var dvalue = response.sort(function(a, b) { 
       return (b.id - a.id); 
      }); 
      $.each(dvalue, function(key, value) { 
       $('#page1__view').append('<li> <a href="#!"> <h3>' + value.username + '</h3> </a> </li>'); 
      }); 
     }, 
     error: function(xhr, err) { 
      console.log(xhr.readyState); 
      console.log(xhr.status); 
      console.log(xhr.responseText); 
     }, 
     complete: function(xhr, status) { 
      console.log(xhr.status); 
     } 
    }); 
}); 

} 

サーバの応答

[ 
{ 
    "id": 1, 
    "username": "alfa", 
    "time": "2016-12-29T08:56:11.607610Z", 
}, 
{ 
    "id": 2, 
    "username": "bravo", 
    "time": "2016-12-29T08:56:12.616765Z", 
}, 
{ 
    "id": 3, 
    "username": "charlie", 
    "time": "2016-12-29T08:56:13.596835Z", 
}, 
{ 
    "id": 4, 
    "username": "delta", 
    "time": "2016-12-30T06:00:13.250253Z", 
} 

] 

あなたはjqueryのコードで見ることができるように。私は2つのAjaxコールを持っています.1つはドキュメント準備ができていて、もう1つはボタンをクリックしています。

サーバから正常に最初のAjax retrives可変の最後の値の時刻を格納pFilter、ユーザがボタンをクリックするたびに、データは、第AJAXに今

<ul id="page1__view"> 
<li> <a href="#!"> <h3>alfa</h3> </a> </li> 
<li> <a href="#!"> <h3>bravo</h3> </a> </li> 
<li> <a href="#!"> <h3>charlie</h3> </a> </li> 
<li> <a href="#!"> <h3>delta</h3> </a> </li> 
</ul> 

としてULに移入pFilter最初の呼び出しからの変数は、2番目のajax呼び出しURLに追加され、情報を取得します。私はチャーリーのタイムスタンプを取得し、URLにappenedたとえば

は、それがこの

http://192.168.23.110/?filter=2016-12-29T08:56:13.596835Z 

のように見え、それは私がチャーリーとデルタとしてreposneを取得することを意味JSONとしてチャーリーからの応答が表示されます。

ここで私が達成しようとしているのは、ユーザーがリフレッシュをクリックしたときに新しいユーザー（この時間に登録されている場合）を取得するタイムスタンプに基づいています。

は、ユーザーがリフレッシュをクリックしたときに今では、サーバーからユーザーことをつかむ必要があります...例えば、最初のAJAXの後、すなわちエコーとフォックストロットを追加した2人のユーザーが存在していると言います。基本的にはある私は何をしようとしています、それはIDに基づいて指定されたタイムスタンプ後にユーザーをつかむ必要があります

それが新しいユーザーと私は彼のタイムスタンプを使用した最後のユーザーをretrivesタイムスタンプの

原因..それを古いリストにプリペンドしてください。

Answer 1

最初に、どこかに初期データを保存する必要があります。私はあなたのリストの中にデータ属性としてお勧めします。

$('#page1__view').data('users', pvalue); 

今、すべての後続の呼び出しにだけユニークユーザーを抽出し、単純な差分を作成し、あなたのリストにそれらのすべてを追加します。もちろん

var oldUsers = $('#page1__view').data('users'); 
var users = [...oldUsers, ...response]; //merge two arrays 
var newUsers = getUnique(users, 'id'); 

var pvalue = newUsers.sort(function(a, b) { 
    return (b.id - a.id); 
}); 

// here we are replacing old list with the new one 
$('#page1__view').empty(); 

$.each(pvalue, function(key, value) { 
    $('#page1__view').append('<li> <a href="#!"> <h3>' + value.username + '</h3> </a> </li>'); 
}); 

$('#page1__view').data('users', pvalue); 

何がそう変更された場合は文がチェックする場合は、いくつかを追加することができますDOMを不必要に混乱させることはありません。

FIDDLEとDIFF

私はあなたを誤解してきたし、我々は他のいくつかの解決策を見つけることを試みるだろうなら、私を修正してください。