удалить и добавить на основе JSON

Question

Я пытаюсь обновить свой html на основе динамического сценария JSON. Поскольку скрипт 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; 

} 

}); 

Answer 1

Лично я хотел бы с нокаутом или угловым для этой функциональности, его намного легче сделать и поддерживать.

В Угловом, например, это был бы простой контроллер с массивом объектов ваших сущностей и html с повторным связыванием. Посмотрите на примеры на своей домашней странице

Нокаут пример, я сожалею, что не могу проверить это прямо сейчас, так что, вероятно, имеет некоторые ошибки в нем (писать в блокноте: D) Edit: HTML

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

JS

<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> 

callService() просто позвоните в ваш тайм-аута сценария, снова извините за I потенциальные ошибки основной ответ, но это должно быть достаточно, чтобы вы свой путь, так как это в основном все, что вам нужно.