CODEWITHSUNDEEP
javascriptjqueryflipclock
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

Javascript/jQuery to show/hide data in loop based on schedule time to show/hide

I'm working with FlipClock js.

var showTime = [];

for (var i = 0; i < jsonStr[4].length; i < i++)
{
    showTime.push({
        startShow: moment(jsonStr[4][i].start_show).format('MM/DD/YYYY HH:mm:ss'),
        endShow: moment(jsonStr[4][i].end_show).format('MM/DD/YYYY HH:mm:ss'),
        newstickerData: jsonStr[4][i].news,
        newstickerID: jsonStr[4][i].id
    });
}

var theCounters = $('.clock .value').FlipClock({
    clockFace: 'TwentyFourHourClock',
    callbacks:
    {
        interval:function()
        {
            var time = this.factory.getTime().time;
            var currentTime2 = (moment(time).format('MM/DD/YYYY HH:mm:ss'));

            showTime.forEach(s =>
            {
                if(s.startShow <= currentTime2 && s.endShow >= currentTime2)
                {
                    field.push({
                        newstickerID: s.newstickerID,
                        newstickerData: s.newstickerData
                    });
                }
            });
        }
    }
});

for(var i = 0; i < field.length; i++)
{
    $('.announcement .announcementBox ul').append("<li id='" + field[i].newstickerID + "'>" + field[i].newstickerData + "</li>");
}

Now I have data in table like this:

id | news | start_show          | end_show
1  | abc  | 2021-01-12 18:32:40 | 2021-01-13 18:53:55
2  | def  | 2021-01-12 17:32:40 | 2021-01-12 18:23:40
3  | ghi  | 2021-01-27 15:01:10 | 2021-01-30 19:32:40
4  | jkl  | 2021-01-12 18:10:40 | 2021-01-30 19:50:40

Now I have function to hide/show news based on start_show and end_show. Assume current date time is 2021-01-27 15:00:00 and as you can see above data, id no 1 and 2 will not show cause We have this condition if(s.startShow <= currentTime2 && s.endShow >= currentTime2). Until this part, it's working good.

ID no 4 will show.

Now the problem is ID no 3 with start_show 2021-01-27 15:01:10, as We know the current date time is 2021-01-27 15:00:00. But after the flipclock time currentTime2 meet the condition, ID no 3 never show.

And another problem is, when end_show is meet the condition to hide, it's not hide.

My question is, how to make it show/hide as per schedule with my above function?

Note: when I tried to alert inside showTime.forEach(s => with alert(s.newstickerData), (start_show meet the condition) I can see the data ID No 3. But it's not fire into $('.announcement .announcementBox ul')

Upvotes: 0

Views: 63

Answers (1)

Karan
Karan

Reputation: 12629

You need to move your append logic inside callback. Check comments in explanation.

var showTime = [];

for (var i = 0; i < jsonStr[4].length; i < i++) {
  showTime.push({
    startShow: moment(jsonStr[4][i].start_show).format('MM/DD/YYYY HH:mm:ss'),
    endShow: moment(jsonStr[4][i].end_show).format('MM/DD/YYYY HH:mm:ss'),
    newstickerData: jsonStr[4][i].news,
    newstickerID: jsonStr[4][i].id
  });
}

var theCounters = $('.clock .value').FlipClock({
  clockFace: 'TwentyFourHourClock',
  callbacks: {
    interval: function() {
      var time = this.factory.getTime().time;
      var currentTime2 = (moment(time).format('MM/DD/YYYY HH:mm:ss'));

      // get ul object into which we need to append li
      let ul = $('.announcement .announcementBox ul');
      // find all existing li inside ul & remove
      ul.find('li').remove();
      // take variable for index
      let i = 0;

      showTime.forEach(s => {
        if (s.startShow <= currentTime2 && s.endShow >= currentTime2) {
          // append li into ul
          ul.append("<li id='" + s.newstickerID + "'>" + s.newstickerData + "</li>");
          // increment index
          i++;
          // remove below code is field array is not needed.
          field.push({
            newstickerID: s.newstickerID,
            newstickerData: s.newstickerData
          });
        }
      });
    }
  }
});

// move below loop inside callbacks
//for (var i = 0; i < field.length; i++) {
//  $('.announcement .announcementBox ul').append("<li id='" + field[i].newstickerID + "'>" + field[i].newstickerData + "</li>");
//}

Upvotes: 0

Related Questions