Mehrere RSS Feeds kombinieren und in einem DIV ausspielen

mieze · 6. August 2019

Liebe Forummitglieder,

ich hab vor einiger Zeit an einem RSS Widget gebastelt. Dank eurer Hilfe klappt es wunderbar. Jedoch stehe ich nun vor einem neuen Problem.

Und zwar muss ich zwei unterschiedliche Feeds kombinieren und in einem Container ausgeben. Also zuerst Feed1 und dann Feed2.

Ich wurde hier bereits wo anders fündig, aber so recht funktionieren will es nicht. Ich lade die beiden Feeds und sehe die in der Konsole (s. Code)

Code

var urls = ['https://example1.com' , 'https://example2.com'];

for (var i = 0; i < urls.length; i++) {
  $.ajax({
    type: "GET",
    url:  'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(urls[i]), 
    dataType: 'json',
    error: function() {
        $("<div class='errorXml'></div>").html('Fehler beim Laden des XML Files.').prependTo(".results");
      },
    success: function(data) {
    
    console.log(data);


    var gItem = '';

data.items.forEach(item => {
                                               
   var itemTitle = item.title.text;
   var itemLink = item.link;
   var itemImage = item.enclosure.link;

    gItem += '<div class="item">';
    gItem += '<a href="'+itemLink+'" class="itemLink" target="_blank">';
    gItem += '<div class="itemImage" style="background-image:url('+itemImage+');"></div>';
    gItem += '<div class="itemBalken">';
    gItem += '<div class="itemTxt">';
    gItem += '<div class="itemTitle"><p>'+cropTitle(itemTitle)+' &gt;</p></div>'; 
    gItem += '</div>';
    gItem += '</div>';
    gItem += '</a>';
    gItem += '</div>';
});

$('#gItem-slider').append(gItem);
        var owl = $('#gItem-slider');
        owl.owlCarousel({
            margin: 0,
            nav: true,
            navText: ["<i class='material-icons'>keyboard_arrow_left</i>","<i class='material-icons'>keyboard_arrow_right</i>"],
            loop: true,
            autoplay:true,
            autoplayTimeout:3000,
            autoplayHoverPause:true,
            smartSpeed:500,
            responsive: {
                0: {
                items: 1
                },
                600: {
                items: 1
                },
                1000: {
                items: 1
                }
            }
        });
        $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
        $('.owl-next').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
 
  },

  });
};
});  
</script>

Alles anzeigen

Im DIV Container werden aber nur die Einträge des Feeds1 ausgespielt und der Feed2 - also die jeweiligen Feed-Einträge separat untereinander. Wie bekomm ich die Einträge vom Feed2 auch in den DIV Container? Ich seh den Fehler einfach nicht.

Danke und lG,

Kathi

Sempervivum · 6. August 2019

Zunächst mal: Ich kann nur davor warnen, auf solch einen externen Service zu bauen. Ich unterstütze da einen Webmaster, der sich ebenfalls mit solchen Newsfeeds befasst und wir hatten schon zwei Mal die Situation, dass solch ein Dienst eingestellt wurde und wir auf einen anderen umstellen mussten.

Der Grund, warum das bei dir nicht funktioniert ist, dass Du mit der Initialisierung des Owlcarousel warten musst, bis beide Feeds geladen sind. So funktioniert es:

Code

        var urls = [
            'feed1.xml',
            'feed2.xml'
        ];
        var feedReady = [];
        for (var i = 0; i < urls.length; i++) {
            $.ajax({
                type: "GET",
                url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(urls[i]),
                dataType: 'json',
                error: function () {
                    $("<div class='errorXml'></div>").html('Fehler beim Laden des XML Files.').prependTo(".results");
                },
                success: function (data) {

                    console.log(data);
                    var gItem = '';
                    data.items.forEach(item => {

                        // var itemTitle = item.title.text;
                        var itemTitle = item.title;
                        var itemLink = item.link;
                        var itemImage = item.enclosure.link;
                        gItem += '<div class="item">';
                        gItem += '<a href="' + itemLink + '" class="itemLink" target="_blank">';
                        gItem += '<div class="itemImage" style="background-image:url(' + itemImage + ');"></div>';
                        gItem += '<div class="itemBalken">';
                        gItem += '<div class="itemTxt">';
                        // gItem += '<div class="itemTitle"><p>' + cropTitle(itemTitle) + ' &gt;</p></div>';
                        // gItem += '<div class="itemTitle"><p>' + itemTitle + ' &gt;</p></div>';
                        gItem += '<div class="itemTitle"><p>' + itemTitle + '</p></div>';
                        gItem += '</div>';
                        gItem += '</div>';
                        gItem += '</a>';
                        gItem += '</div>';
                    });
                    $('.owl-carousel').append(gItem);
                    feedReady.push(true);
                    if (feedReady.length == urls.length) {
                        var owl = $('.owl-carousel');
                        owl.owlCarousel(
                            {
                                // margin: 0,
                                nav: true,
                                // navText: ["<i class='material-icons'>keyboard_arrow_left</i>", "<i class='material-icons'>keyboard_arrow_right</i>"],
                                // loop: true,
                                // autoplay: true,
                                // autoplayTimeout: 3000,
                                // autoplayHoverPause: true,
                                // smartSpeed: 500,
                                // responsive: {
                                //     0: {
                                //         items: 1
                                //     },
                                //     600: {
                                //         items: 1
                                //     },
                                //     1000: {
                                //         items: 1
                                //     }
                                // }
                            }
                        );
                        // $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
                        // $('.owl-next').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
                    }
                },
            });
        };

Alles anzeigen

Mehrere RSS Feeds kombinieren und in einem DIV ausspielen

Jetzt mitmachen!

Teilen