CODEWITHSUNDEEP
jqueryjson
Peter Pik
Peter Pik

Reputation: 11193

delete and add based on JSON

I'm trying to update my html based on a dynamic JSON script. Since the JSON script changes all the time. The objects is being deleted and new is added all the time. Every 5 seconds the script is being executed and i want to check if there are new objects which is not shown or there are objects which are shown which are not in the JSON file. At the moment i've added the match_id, which is a key in every JSON object to the following div result-in-month. Which i guess you need to do some comparison with? How can i create this add new or remove function?

$(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;

}

});

Upvotes: 0

Views: 57

Answers (1)

Goran Žuri
Goran Žuri

Reputation: 1643

Personally I would go with knockout or Angular for that functionality, it is much easier to make and to maintain.

In Angular for instance it would be a simple controller with the object array of your entities, and html with repeat binding. Take a look at examples on their home page

Knockout example, I'm sorry I can't test it right now so it probably has some bugs in it (writing in notepad :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() just call in your timeout script, again sorry for the basic answer I potential bugs but this should be enough to get you your way since it is basically all you need.

Upvotes: 2

Related Questions