CODEWITHSUNDEEP
javascriptjquerymomentjs
nyc_coder
nyc_coder

Reputation: 633

How to make each unique timestamp update

I'm working on updating timestamps using Moment JS for a twitter feed clone.

When I add new tweets to the feed the timestamp of the older tweets also updates. I checked dev tools and the timestamp attribute isn't updated, so I'm not sure why it's refreshing. 

  var tweetMaker = function(tweet) {
      var $tweet = $('<div></div>');
      // Create HTML Nodes
      var name = document.createElement('span');
      var nameText = document.createTextNode('@' + tweet.user);
      var timeStamp = document.createElement('time');
      var timeStampText = document.createTextNode(moment(tweet.created_at).fromNow());
      var linebreak = document.createElement('br');
      var messageText = document.createTextNode(tweet.message);

      // Add Classes 
      $tweet.addClass('tweet');
      $(timeStamp).addClass('timeStamp');
      $(timeStamp).attr('data-time', tweet.created_at);
      $(name).addClass('name');
      $(name).attr('tweetName', tweet.user);

      // Build Nodes
      name.appendChild(nameText);
      timeStamp.appendChild(timeStampText);
      $tweet.append(name, timeStamp, linebreak, messageText);
      $('#tweetFeed').prepend($tweet)
  }


 //PROBLEM: All timestamps update with new batch of tweets 
  var timeUpdate = function(time) {
    var timeStamp = $('.timeStamp');
    var originalTime = timeStamp.attr('data-time');
    console.log(originalTime)
    timeStamp.html(moment(originalTime).fromNow());
  }

 $(document).ready(function() {
    initialFeed();
    setInterval(timeUpdate, 2000);

    $('.name').on('click', filterByName);
    $('#originalFeed').on('click', showFeed);
    $('#newTweets').on('click', newTweets);
  });
});

Upvotes: 1

Views: 45

Answers (1)

nemo
nemo

Reputation: 1685

var timeStamp = $('.timeStamp'); will selecet ALL .timeStamp elements. You should do something like this

var timeUpdate = function(time) {
  var timeStamps = $('.timeStamp');
  timeStamps.each(function (i) {
    var timeStamp  = $(this);
    var originalTime = timeStamp.attr('data-time');
    console.log(originalTime)
    timeStamp.html(moment(originalTime).fromNow());
  });
}

Upvotes: 1

Related Questions