Update live JavaScript Array while pushing elements to HTML ID

Question

I am facing a slight dilemma as a JavaScript newbie. Let me explain the script:

I have implemented a JavaScript function rss() which pulls from an internet RSS news feed and saves the news headlines into an array newsArray[].
The function headlinesInsert() should push every item in the array to the HTML ID #headlineInsert, similarly to how it is shown here.
However, the linked example's textlist variable (which should be replaced with my local newsArray[]) does not seem to be 'compatible' for some reason as when replacing nothing shows on the HTML side.

The idea is that the rss() function updates the global newsArray[] with new headlines every 10 minutes while the headlinesInsert() pushes this data to the HTML ID constantly (as per the linked example).

With my limited knowledge of JavaScript, I am hoping someone could help me set the following code right and put the idea into action.

// Push RSS Headlines into HTML ID
var newsArray = [];
var listTicker = function headlinesInsert(options) {
    var defaults = {
        list: [],
        startIndex:0,
        interval: 8 * 1000,
    }

    var options = $.extend(defaults, options);
    var listTickerInner = function headlinesInsert(index) {
        if (options.list.length == 0) return;
        if (!index || index < 0 || index > options.list.length) index = 0;
        var value = options.list[index];
        options.trickerPanel.fadeOut(function headlinesInsert() {
            $(this).html(value).fadeIn();
        });
        var nextIndex = (index + 1) % options.list.length;

        setTimeout(function headlinesInsert() {
            listTickerInner(nextIndex);
        }, options.interval);
    };
    listTickerInner(options.startIndex);
}

// The following line should hold the values of newsArray[]
var textlist = new Array("News Headline 1", "News Headline 2", "News Headline 3", "News Headline 4");

$(function headlinesInsert() {
    listTicker({
        list: textlist ,
        startIndex:0,
        trickerPanel: $('#headlineInsert'),
        interval: 8 * 1000,
    });
});

$(function slow(){
    // Parse News Headlines into array
    function rss() {
        $.getJSON("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.stuff.co.nz%2Frss", function(data) {
            newsArray = [];
            for (var i = 0; i < data.items.length; i++){
                newsArray[i] = (data.items[i].title);
            }
            console.log(newsArray);
    })}

    // Refresh functions ever 10 minutes
    rss()
    setInterval(function slow() {
        rss();
    }, 600000); // 10 Minute refresh time
});

Maybe this (stackoverflow.com/questions/19562494/…) could help you. — Henrique Oecksler Bertoldi
– Henrique Oecksler Bertoldi, Commented Jul 10, 2017 at 11:47

Tushar Vaghela · Accepted Answer · 2017-07-10 15:22:15Z

1

Check following code. You need to initialise listTicker once rss feed is loaded.

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script>
  var listTicker = function(options) {

    var defaults = {
      list: [],
      startIndex: 0,
      interval: 3 * 1000,
    }
    var options = $.extend(defaults, options);

    var listTickerInner = function(index) {

      if (options.list.length == 0) return;

      if (!index || index < 0 || index > options.list.length) index = 0;

      var value = options.list[index];

      options.trickerPanel.fadeOut(function() {
        $(this).html(value).fadeIn();
      });

      var nextIndex = (index + 1) % options.list.length;

      setTimeout(function() {
        listTickerInner(nextIndex);
      }, options.interval);

    };

    listTickerInner(options.startIndex);
  }

  var textlist = new Array("news1", "news2", "news3");

  $(function() {

    function rss() {
      $.getJSON("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.stuff.co.nz%2Frss", function(data) {
        newsArray = [];
        for (var i = 0; i < data.items.length; i++) {
          newsArray[i] = (data.items[i].title);
        }
        console.log(newsArray);
        listTicker({
          list: newsArray,
          startIndex: 0,
          trickerPanel: $('#newsPanel'),
          interval: 3 * 1000,
        });
      })
    }

    rss();
  });
</script>
<div id='newsPanel' />

answered Jul 10, 2017 at 15:22

Tushar Vaghela

1,2431 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ProGrammer Over a year ago

I like this approach as it iterates through the array data nicely. But as mentioned in my post, every 10 mins the array receives new data and when it does, the interval and text displayed behaves oddly. The text displayed shows text at the array position before the new data came in, however at the same time a new instance of the function launches to push the new data out too, this makes the headlines jump around (ea instance wants to display) and out of sync with the defined interval - especially when the array data has turned over 2+ times. These "old instances" need to be disposed of

ProGrammer Over a year ago

Do you have a solution to the question I posted in the comment? Basically, the trouble lies with the new instances of the function, every time a function launches, it seems to fill a new array instead of updating the current one. I know it is hardly noticeable but over the course of several hours (remember that a new query is processed every 10 mins and should load its data into the array) it is very observable that the timing is totally off. It stops for longer than the specified time, jumps the order of elements etc. Any solution is very much appreciated. Cheers.

Collectives™ on Stack Overflow

Update live JavaScript Array while pushing elements to HTML ID

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related