RSS feed displayed as a carousel

Hi all

Im having difficulties here. Im trying to pull in an rss feed into my bootstrap carousel.

The feed is being pulled in successfully and the css/html is correct, but the carousel doesnt work. I think this is because the css/html is loading before the rss feed is loading.

Have a look here: https://codepen.io/dl292/pen/xxGxNBz

Can I run the js first; wait for the feed to load; and then render the html?

Thanks

Hi,

The first thing to address are all of the errors in the console.

In CodePen, you should include any assets JAvaScript via Settings > JS.

Ah ok, thanks James. This is the first time Ive used CodePen.
Could you take another look?

Same thing goes for CSS.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

Needs to go in the CSS tab.

I’m also seeing Bootstrap throwing a TypeError in the console.

But maybe before getting into all of that, you can explain what you are trying to accomplish (I still haven’t really understood).

You obviously have an RSS feed, which is here, right?

You’re fetching the feed using vue-resource.

Then what are you trying to do?

Yes, thats right @James_Hibbard . I want that rss feed to display in a carousel. (The post’s feature image will be the carousel image and the post’s title will be the carousel caption). So it shoudl look like theg carousel here, but being fed from the rss feed: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

The feed is being pulled into the page successfully (you can see the images being pulled in, and if you scroll to the bottom youll see the jumble of text which is all the titles).

But the carousel isnt working. I think that may be because the carousel is being loaded before the rss feed. But I may be wrong.

There are a couple of problems with your approach.

The first thing is that you are initializing the carousel before the Ajax request has returned with the results.

The second is the interplay between jQuery, Bootstrap and Vue. If this is a Vue app, it would probably be better to use Bootstrap Vue, which has a Carousel component, and lose the other libraries.

Thanks @James_Hibbard . Its not a vue app, its just that vue was the only method of pulling in an rss feed that I could get working! :slight_smile:
My website is using Bootstrap v3. Ill take another look at this in a minute.

Then in that case, pull in the data using normal Ajax. I assume you are using jQuery. Here’s a snippet:

$.get(
  'https://colorlib.com/wp/wp-json/wp/v2/posts',
  (json) => {
    // I can haz posts
    console.log(json)
  }
).fail((err) =>{
  // Something went wrong
  console.error(err);
});

I also noticed you are using vue-resource’s jsonp method. If that’s what you’re working with, have a look here:

Sorry. Im having no luck with this!! Ive tried various examples online. It works fine with their example json feeds, but then when I try with https://colorlib.com/wp/wp-json/wp/v2/posts all I get is ‘undefined’!!

Is it a 3rd party API, or one you have access to?

The RSS feed is coming from an external source which I have no control over the format of.

Which browser are you testing in? Are you testing locally (i.e. opening the file in the browser directly), or using a server?

Im using my localhost. (so yes, a server)
Im using Chrome. I can see results of working demos appear in the console. But when I try and use my json and edit their code, I cant get anything working.

This is the last bit of code I was working with. Im sure its something obvious Im doing wrong. :frowning:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			
            $("#driver").click(function(event){
               $.getJSON('https://colorlib.com/wp/wp-json/wp/v2/posts', function(jd) {
                  $('#stage').html('<p> Description: ' + jd.description + '</p>');
                  $('#stage').append('<p>Required : ' + jd.required+ '</p>');
               });
            });
				
         });
      </script>
   </head>
	
   <body>
		
      <div id = "stage" style = "background-color:#cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Where are the carousel images being pulled from? I don’t see them in the initial response.

Im getting a bit closer with this! :slight_smile:

My code is now:

<html>
<head><title>The jQuery Example</title></head>	
<body>
<div id="display-feed"></div>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){    
        // set no cache
        $.ajaxSetup({ cache: false });
        $.getJSON("https://colorlib.com/wp/wp-json/wp/v2/posts", function(data){ 
            var html = [];
            // loop through array
            $.each(data, function(index, d){            
                html.push("Date : ", d.date, ", ",
                          "ID : ", d.id, ", ", 
                          "Excerpt : ", d.link, "<br>");
            });
            $("#display-feed").html(html.join('')).css("background-color", "orange");
        }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
            // alert(jqXHR.responseText)
            alert("error occurred!");
        });
});
</script>
</body>
</html>

This is pulling in data successfully from https://colorlib.com/wp/wp-json/wp/v2/posts .

But now I cant get at the image path name or title of each post.

Exactly. How were you getting these in your original example? I cannot see anything relating to images in https://colorlib.com/wp/wp-json/wp/v2/posts.

In my original example, the relevant line are:

{{item._embedded['wp:featuredmedia']['0'].source_url}}
(in the html)

But I cant get similar working in my current example.

Lol, gnarly.

If you look at the JSON you are pulling in, there is a _links > wp:featuredmedia > 0, href key, that contains a URL. That URL goes to something like this:

https://colorlib.com/wp/wp-json/wp/v2/media/36414 where you have a guid > rendered key that contains the image that you need.

What we would need to do is to parse the original JSON payload, then fetch each image URL, then fetch each image, which would be possible, but seems like a weird way to do things.

Maybe there’s a better way, but I’m not overfly familiar with the WordPress API and I’d need to spend some time reading around it.


Also, can I ask why you are taking this approach? It’s not actually an RSS feed we’re dealing with here, rather exposed API endpoints on a site that you don’t own. If you pull in all of their images and make a slider of them, it’s probably copyright infringement.

Thanks for your help with this James, it is very much appreciated. :slight_smile: I will reply next monday (Ive just had some urgent work come in).

To briefly answer you: The https://colorlib.com/wp/wp-json/wp/v2/media/36414 wasjust an example feed. I thought that if I could get the code working with that feed then I could get it working with my ‘actual’ feed. I didnt think it was going to be such a minefield. :slightly_smiling_face:
Ill post next monday. Have a great weekend!

1 Like