Jquery 基于JSON的删除和添加

我正在尝试基于动态JSON脚本更新我的html。因为JSON脚本一直在变化。对象将被删除，并且始终添加新对象。脚本每5秒执行一次，我想检查是否有未显示的新对象，或者是否有未显示在JSON文件中的对象。目前，我已经添加了match_id，它是每个JSON对象中的一个键，并将其添加到每月的以下div结果中。我想你需要和它做一些比较？如何创建此添加新功能或删除功能

$(function() {

var lastLoadedMatch = 0,
    ajaxInterval = 1000;

getMatches();


function getMatches(lastId) {

  $.getJSON('json', function(resp) {

    var matches = [resp.live, resp.upcoming, resp.recent];

    $.each(matches, function(i, match) {
      var currentMatch = match;

      if (lastId) {
        currentMatch = match.filter(function(m) {
          return m.id > lastId;
        });
      }

      if (currentMatch.length) {

        // First iteration: Create content
        $.each(currentMatch, function(_, m) {
          if (m.match_id > lastLoadedMatch) {
            lastLoadedMatch = m.match_id
          }

      });
    });

  });

  setTimeout(function() { getMatches(lastLoadedMatch); }, ajaxInterval);
}


function matchHtml(obj, type) {

  var team1 = obj['team 1'],
      team2 = obj['team 2'],
      stream = obj['streams'],
      html = '<div class="result-in-month" id="match-date-id-' + obj['match_id'] + '">';

    html += '</div>';

  return html;

}

});

$（函数（）{
var lastLoadedMatch=0，
ajaxInterval=1000；
getMatches（）；
函数getMatches（lastId）{
$.getJSON（'json'，函数（resp）{
var matches=[resp.live，resp.uncoming，resp.recent]；
$。每个（匹配，函数（i，匹配）{
var currentMatch=匹配；
if（lastId）{
currentMatch=match.filter（函数（m）{
返回m.id>lastId；
});
}
if（currentMatch.length）{
//第一次迭代：创建内容
$.each（currentMatch，function（u，m）{
如果（m.match\u id>lastloaddematch）{
lastLoadedMatch=m.match\u id
}
});
});
});
setTimeout（函数（）{getMatches（lastLoadedMatch）；}，ajaxInterval）；
}
函数匹配HTML（对象，类型）{
var team1=obj['team1']，
团队2=obj[‘团队2’]，
stream=obj['streams']，
html=''；
html+=''；
返回html；
}
});

就我个人而言，我会选择knockout或Angular，因为它更易于制作和维护

例如，在Angular中，它将是一个带有实体对象数组的简单控制器，以及带有重复绑定的html

例如，很抱歉，我现在不能测试它，所以它可能有一些bug（用记事本写：D） 编辑： HTML

JS

var Match=函数（）{
var self=这个；
self.matches=ko.observearray（）；
self.ajax=函数（uri、方法、数据）{
var请求={
url:uri，
类型：方法，
contentType:“应用程序/json”，
接受：“application/json”，
cache:false，
//数据类型：“json”，
数据：JSON.stringify（数据），
错误：函数（jqXHR）{
log（“ajax错误”+jqXHR.status）；
}
};
返回$.ajax（请求）；
}
函数callService（）{
self.ajax（url+“？”+requestData，'GET'）.done（函数（数据）{
self.matches.removeAll（）；
for（int i=0；i

---

callService（）只需调用您的超时脚本，再次为我的基本答案感到抱歉，我想知道潜在的bug，但这应该足以满足您的需要，因为它基本上就是您所需要的。

这。Knockout/Angular/Other中的数据绑定功能就是为这种场景创建的。好吧，但我对JQuery或Angular没有任何经验？lear怎么样为这样的脚本绘制曲线？然后我建议Knockout学习基础知识真的很容易，我将在原始答案中为您的问题发布一些简单的示例，url在哪里，在CallService的第一行url和requestData是什么？它未定义？

<ul class="list-group col-sm-12 col-xs-12" data-bind='foreach: matches'>
  <li data-bind="html: name"></li>
</ul>

<script >
var Match = function(){
 var self = this;
 self.matches = ko.observableArray();

 self.ajax = function (uri, method, data) {
    var request = {
        url: uri,
        type: method,
        contentType: "application/json",
        accepts: "application/json",
        cache: false,
        // dataType: 'json',
        data: JSON.stringify(data),
        error: function (jqXHR) {
            console.log("ajax error " + jqXHR.status);
        }
    };
    return $.ajax(request);
}


function callService(){
    self.ajax(url + "?" + requestData, 'GET').done(function (data) {
        self.matches.removeAll();
        for(int i = 0; i < data.Result.length; i++){
            self.matches.push(..data..)
        }
    }
}


}

ko.applyBindings(new Match());
</script>