Search code examples
jqueryhtmlrssfeed

jQuery how to replace static variables with dynamic for each loop in function


I'm using the jQuery feeds script here http://camagu.github.io/jquery-feeds/demos/: Below is a working html page with jquery that pulls links to RSS feeds from a list of links in an html list and are passes them to the feeds function which displays them in a div on the page.

My question is I want to dynamically create the array of urls to pass to the feeds function from content on the page itsel (a listoflinks) (which I've done), but instead of passing them one at a time listoflinks[0], I want to pass the entire array in listoflinks. How can I modify this to work with any number of links instead of the specified array size, I know I should do a foreach loop, but not sure where it should be in put for this to work. Currently each link is passed to the feeds function with $listoflinks[0], $listoflinks[1], $listoflinks[2] etc.

<!DOCTYPE html>
<head>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Load moment.js, used to format dates, totally optional -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.6.2/moment.min.js" charset="utf-8"></script>


<!-- Load jQuery Feeds -->
<script src="js/jquery.feeds.min.js" charset="utf-8"></script>
<script type="text/javascript">

// A $( document ).ready() block.
$(document).ready(function() {
console.log( "ready!" );

var listoflinks = [];
$(".field-name-field-news ul li a").each(function() { listoflinks.push("http:" + $(this).attr("href")) });

 //console.log(listoflinks[0]);


$('.feed').feeds({

    feeds : {
//  uniquename: "https://www.domain.com/rss",
  option0: listoflinks[0],
  option1 : listoflinks[1],
  option2 : listoflinks[2],
  option3 : listoflinks[3],
},
    preprocess : function(feed) {
        // Using moment.js to diplay dates as time ago
        this.publishedDate = moment(this.publishedDate).fromNow();
    },
    entryTemplate : 'entryTmpl',
//  onComplete : function(entries) {
//      $(this).find('a').attr('target', '_blank');
//  }
});
});
</script>

</head>

<body>


<script type="text/html" id="entryTmpl">
<article class="<!=source!> entry">
    <p>
        <a class="link" href="<!=feedLink!>" title="<!=feedDescription!>">    <!=feedTitle!></a>
        <span class="publishedDate"><!=publishedDate!></span>
    </p>
    <p class="author"><!=author!></p>
    <div class="content"><!=content!></div>
<div class="mediagroup">mediaGroup: <!=mediaGroup!></div>
<div class="categories">categories: <!=categories!></div>
<div class="feedauthor">feedAuthor<!=feedAuthor!></div>
</article>
</script>

<div class="field field-name-field-news field-type-link-field field-label-hidden">
<div class="field-items">
      <div class="field-item even"><div class="item-list">
<ul><li class="first"><a href="//www.filmschoolrejects.com/feed">Filmmaking Tips | Film School Rejects</a></li>
<li><a href="//www.filmmakingstuff.com/feed/">Filmmaking Stuff | For Independent Filmmakers</a></li>
<li><a href="//www.reddit.com/r/Filmmakers/.rss">Filmmakers - Reddit</a></li>
<li><a href="//feeds.feedburner.com/povdocs">For Filmmakers: Documentary Filmmaking Resources from POV - PBS</a></li>
<li><a href="//filmmakermagazine.com/category/filmmaking/feed/">Filmmaking | Filmmaker Magazine</a></li>
<li><a href="//cheapfilmmaking.com/feed">Cheap Filmmaking</a></li>
<li><a href="//www.filmmakingreview.com/feed/">Filmmaking Review</a></li>
<li><a href="//www.filmindependent.org/feed/">Artist Development | Film Independent</a></li>


<li class="last"><a href="//www.allaboutindiefilmmaking.com/feeds/posts/default">All About Indie Filmmaking</a></li>

</ul></div></div>
  </div>
</div>
  </div>

<div id="feed" class="feed">
Feed content will go in here.
</div>
</body>
</html>

Solution

  • I would suggest you create an empty object

    var listoflinks = {};
    

    Then replace this line

    $(".field-name-field-news ul li a").each(function() { listoflinks.push("http:" + $(this).attr("href")) });
    

    with the following one to add items to your object

        $(".field-name-field-news ul li a").each(function(index) { 
          listoflinks['option'+index] = "http:" + $(this).attr("href"); 
       });
    

    Now instead of passing 4 items to your feeds() method, pass the object we build earlier

    $('.feed').feeds( {
       feeds: listoflinks, 
      // your function (didn't modify this)
      preprocess: function(feed) {}
     });