Create an RSS Reader Using AngularJS and IonicFramework

This article was designed to help you apply your knowledge of AngularJS and IonicFramework and create a functional app rather than learn new concepts.

This tutorial should help you with the following concepts:

To process our RSS XML and convert to JSON, we are going to rely on Google’s Feed API, but we could always include our own XML processor.

Let’s start by creating our project from scratch using the command line:

Please note that if you are not on a Mac, you cannot add the iOS platform.  This tutorial will work fine for iOS, but you must be on a Mac.  Otherwise, stick to just Android.

Let’s go ahead and install the Apache Cordova InAppBrowser plugin:

If you need further information on this plugin, you can see a full description with tutorial via my previous article on the topic.

So let’s get some background information on the Google Feed API.  Based on the official documentation our endpoint for the API is GET http://ajax.googleapis.com/ajax/services/feed/load and it expects the following parameters:


ParameterDescription
vThe version of the API.  Currently we are on version 1.0
qThe query to be used in the API.  The URL with the RSS feed represents our query
numThe number of entries to return. Default is 4 and maximum is 100

If everything was done correctly, we will get a response that looks like this:

Now that we know what the API expects and what it will return, we can start coding our application.  Jumping into things, open www/js/app.js and add the following controller:

The above controller has an init() method that will make an HTTP request to the Google Feed API and store the response for use in our application.  You can get more information on how the $http.get() method works from my previous article on the topic.

Now that we have a controller that handles our RSS data, lets worry about displaying it on the screen for the user.  Go ahead and crack open your www/index.html file as that is where we will display our data:

In the highlighted section above you’ll notice that we’ve added our FeedController and called the initialization function.  The response data will be looped and displayed as an item in the list.  You’ll notice that I used the ng-bind-html tag because I am expecting our content data to have HTML unsafe characters like single quotation mark.  If I didn’t include this tag we would end up with raw HTML entities.

So now we need to make each item in the list take us to the actual entry page.  This is where the Apache Cordova InAppBrowser comes into play.  Change the following in your www/index.html file:

You’ll notice that the div tags became a tags and that I’ve included an ng-click with a currently undefined method.  Let’s define that function in our www/js/app.js file.  Inside the FeedController add the following:

Just like that, you can now click on any of the list items and be brought to the link that they summarize.

Ionic RSS Reader List Ionic RSS Reader Site

Now the last thing we want to do is cache our data in case there is a time where the user does not have internet access.  This will be done by storing the entries in local storage on every successful API attempt, and using the stored items on every failed attempted.  Let’s revisit the init() method in our controller:

Just like that, we have a very functional IonicFramework app which demonstrates the use of HTTP requests, data caching, external web browsing, and Ionic lists.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Jon

    I love the article, but when I pluggd in my feed, it didn’t show anything in my web browser.
    You have very good instructions, so I don’t know why my feed isn’t showing up.
    Any ideas I can look into?

    • You may be having an issue with cross origin resource sharing (CORS). What browser are you using, and when you inspect the request does it show any error messages? Have a look at one of my previous articles on the topic:

      https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/

      JavaScript requests often fail in the browser because of this. If the above article doesn’t help you correct the problem, please let me know.

      Cheers,

      • Jon

        Using FF, made the change to false in security.
        Still the same, I’m going over the codes one more time to see if there’s any typo’s error on my part.

        • Every once in a while, the FF security thing doesn’t work. Are you on a Mac or Linux machine by chance? Maybe you can start a local web sever so your requests are not processed from file://. You can create a local web server like so from your www directory:

          python -m SimpleHTTPServer

          I believe you can also use Ionic to create a local web server:

          ionic serve

          Are we sure that CORS is the problem? If so, you won’t have this problem from a simulator or device.

          • Jon

            On Windows7 – tried on ionic serve and xampp and getting the same results

          • Jon

            I tested on a different ionic app and I’m not having any problems.

          • For the one that is failing can you inspect what is happening in Firebug or the Firefox Inspector? Sounds like maybe we aren’t having CORS issues. Also, can you please paste the request you’re trying to use? Should look something like:

            http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://yoursitehere.com

            Let’s try to figure out where / why it’s failing before we try to correct it.

            Cheers,

          • Jon

            This is what’s on the my console
            ” No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. ”

            also
            http://ajax.googleapis.com/ajax/services/feed/load?num=20&q=http:%2F%2Fnwsportsmanmag.com%2Ffeed%2F&v=1.0

            The last is shown from firebug console but not the same syntax as I had in the app.js file

          • That definitely seems related to one of those nasty CORS type errors.

            I verified your API call is correct. Can you please run the code in a simulator or device and confirm that it works there? It will help us narrow it down.

            We’ll get to the bottom of this 🙂

          • Jon

            Hey Nic,
            When I uploaded to “phonegap build” , it worked on the device!
            Just still puzzle why it wasn’t showing up on my FF browser, my other apps works fine on it when debugging.
            Another thing, once I tapped a feed it goes to the story, which works, but can’t go back to the home feed page.
            I would wind up having to get out of the app and restart.

            I don’t need to do anything else with that “inappbrowser” plugin do I?
            btw, appreciate your prompt advices!

          • Glad it worked on your device!

            CORS is a tricky subject, and ultimately it is up to the server owner if they want to allow it. In this case, it doesn’t sound like they want to which causes the browser to fail. Not too much we can do beyond the little tricks that you already tried.

            If you’re using the InAppBrowser to launch the external web browser, hitting the back button on Android should kill the browser and return to the app. Instead of using _system you can also try _self or _blank as they will give you different browser options which might work better for iOS.

            https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/

            Let me know how it goes!

  • i change $http.get for $http.jsonp call
    this way it works locally and build

    feedurl =’https://www.thepolyglotdeveloper.com/feed/’;
    url = ‘http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=’ + encodeURIComponent(feedurl);
    $http.jsonp(url).success(function(data) {

  • AlexJolig

    Hey. Thanks for the nice article. I tried your sample but all I get on my emulator is this:

    Simple RSS Reader

    {{ entry.title }}

    Can you please help me?

    • Hi,

      If you’re seeing raw AngularJS tags on your screen it means you have a typo somewhere or you forgot to include a library.

      Check to make sure all your brackets and quotes are closed. That is what gets me all the time.

      Regards,

      • Alex Jolig

        Thanks for the reply. Im using JetBrain WebStorm editor. so i’m sure there are no typos. and I copied your code. here’s my scripts on index.html. Am I missing somthing?

        • Hi,

          My blog won’t allow you to paste HTML content. I suggest you paste your code in PasteBin, or a similar service. Then just give me the link.

          I’ve experienced what you mentioned many times before, and all have been related to typos or bracket issues in the app.js file.

          Regards,

          • Alex Jolig

            Here’s the link for the scripts

            http://pastebin.com/8a76uUeM

            And here’s the link for my question about it in StackOverFlow. You can see the whole code there

            http://stackoverflow.com/questions/26683071/cordova-rss-reader-app-is-not-working

            Thank You

          • Hi Alex,

            The content you put on PasteBin wasn’t very useful for debugging, but the content you put on StackOverflow was.

            I think your problem is with the following line:

            rssApp.controller("FeedController", function($http, $scope) {

            You make reference to rssApp, but such a variable does not exist. I believe you are interested in the following:

            var rssApp = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']);

            Notice the var rssApp = part.

            Let me know if that makes a difference for you.

            Regards,

  • Alex Jolig

    Thank you. I tried it. But the same problem still exists. Its like $scope.init function never triggers. I tried putting alert messages all over it. none of them popped up. I even tried removing rssApp variable and nothin diffrent happend. Do you think I should add something else for it to triggers?

    • Hi Alex,

      Two things to try:

      1. What is this? ‘starter.controllers’, ‘starter.services’. I’m not familiar with this, so maybe it is breaking your code?
      2. What do the logs say? If you inspect with Chrome Inspector or Firebug, you should get a clear answer regarding what is failing.

      Let me know what happens.

      Regards,

      • Alex Jolig

        Hey, Thanks to your hints about the module line, I managed to solve it. It has problem in showing the RSS on the browser thou, But it’s working fine on the emulator. I explained the code on StackOverFlow.

        http://stackoverflow.com/questions/26683071/cordova-rss-reader-app-is-not-working/26690376#26690376

        Thank you so much.

        • Hi Alex,

          I’m glad you got it working 🙂

          If you’re having browser issues, it might be a cross origin resource sharing (CORS) issue. Check out a previous post I made and see if it helps you:

          https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/

          Regards,

          • Ken Schultz

            Hey Nic,

            I too have this running great in the Emulator, however when I attempt to use Safari for testing, or more importantly any type of live reload e.g. ( ionic run -L or ionic serve –lab ), even when the emulator uses live reload, the feed disappears..?

            I tried your tips with CORS on safari and running a python server, however I cant get the feeds to show.

            Thoughts?

            Cheers,

            Ken

          • CORS is a real pain when it comes to testing. Do the logs confirm that it is in fact a CORS issue?

          • Ken Schultz

            No I have not confirmed the issue of the missing feed beyond the simple emulator vs server testing. I figured you might have some thoughts since it won’t run on the emulator when Live reload is utilized. I’ll activate the logging and see what it might be… Having the live reload both in browser and on device is amazing, and a nightmare once you lose it.

          • I personally have had nothing but trouble with browser testing and live reload. I’ve got the mentality that we are developing for mobile so it should be tested on the mobile.

            If you were developing native iOS and Android applications you’d have to build and install so there shouldn’t be an exception when it comes to Cordova.

            Just my opinions though. In any case, let me know what the logs say and we’ll start there.

            Regards,

          • This chrome extension can help you dealing with CORS error on web browser.

            https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/

  • John

    Hello,

    Thanks for sharing this.

    I have one issue which comes from google API cache.

    When I reload, I get the same datawhilst the RSS feed content as changed. I understand this is because the google api is using a cache.

    I(d like to bypass the cache to get full refress. I tried with adding a time argument to my URL but it does not work.

    Have you experienced that ?

    Thanks

    John

  • Dheeraj

    Hello,

    Thanks Nic for sharing this. Is it possible to pull images as well and place them on the left of the content?

    Thanks,
    Dheeraj

    • Hi Dheeraj,

      It is my understanding that RSS feeds do support images. The XML node should look something like this:

      When trying to display in your code you might do something like the following:

      Where imageURLVariable is whatever represents image.url from your feed. Notice that you must use ng-src rather than src in your img tag.

      Hopefully that helps you.

      Regards,

      • Dheeraj

        Thanks Nic for the quick reply. Sorry I just started learning about anjular and ionic. In the code below how would I add the XML node for image?

        Thanks again,
        Dheeraj

        • Hi Dheeraj,

          The Google Feeds API does not return images. See what it outputs here:

          https://developers.google.com/feed/v1/reference#resultBasic

          If you wanted to parse the XML yourself or find a different XML RSS parser that included images you can.

          Regards,

          • Rodrigo Dias

            Hello, Nic. I had the same problem it. Do you know any other XML RSS parser that included images?

          • I don’t know of any, sorry.

  • Armin

    Hi Nic,

    i’m new to angular.js and ionic but this tutorial is really great i understood everything, thank you!

    But please can you help me with some modifications? 🙂
    • I don’t want that the LINK of an article shows in the in app browser, instead the link should open in a detail page of ionic (ion-nav-view for example
    http://ionicframework.com/docs/api/directive/ionNavView/).

    • I also want to add the publishedDate statusbut if i add entry.publishedDate nothing happend.

    My last question.
    • how could i integrate the ionRefresher to handle the RSS FEED reload without restarting the app (http://ionicframework.com/docs/api/directive/ionRefresher/)

    • Hi Armin

      Are you sure a publishedDate was returned as something other than blank / null / undefined? Just because the Google Feed API returns it, doesn’t mean it will be filled. Check the response and see if it is there.

      If you want the contents to be loaded via a detail page you’d have to make use of caching and the UI router:

      https://www.thepolyglotdeveloper.com/2014/11/using-ui-router-navigate-ionicframework/
      https://www.thepolyglotdeveloper.com/2014/06/saving-data-with-ionicframework/

      I imagine you’d have to download all the posts on load and store the response in local storage. Then you can pick and pull from local storage on a different view.

      As for the ionRefresher, have it call the init() method because in the init() method we have it get all our data. It will basically just get all the data again.

      Regards,

      • Armin

        Hey Nic,

        thank you for the help now i can pull the publishedDate on my newsroll and the ionRefresher works also! But i don’t understand this UI router thing :/ .. i store all the data in localStorage and if my iphone is on airplane mode the rss feed works but i have no idea how i get the right post (id) on the detail page.

        app.js

        app.js

        newsroll.html

        How must the entry.html has to look?

        entry.html??

  • Ken Schultz

    Hey Nic, Great overview! What’s the best syntax for pulling in multiple feeds from different urls at the same time, either with the same feed params or different? Separate controllers for each feed?

    • You can do this all from the same controller. The $http calls are asynchronous, so just create a storage variable and fire off as many $http calls as you want. As the result sets come in, push them into your storage variable. I say push because you want to add them, not replace your storage variable.

      The feed won’t populate all at once, but it will get there at some point.

      Does this make sense?

      Regards,

  • Sveta Margetova

    Hi, can I ask how can I get data from Linkedin API with Ionic?

    • You might take a look at the blog post I did on the Ionic Framework blog:

      http://ionicframework.com/blog/oauth-ionic-ngcordova/

      Use $cordovaOauth.linkedin to get the access token. Then take a look at the LinkedIn APIs:

      https://developer.linkedin.com/apis

      Regards,

      • Sveta Margetova

        Thank you 🙂 I tried integrate it based on your facebook example, but i dont know where I have a mistake. I have registered app on linkedin developers, filled all information, but I have returned white screen.

        inkedinExample.controller(“LoginController”, function($scope, $cordovaOauth, $localStorage, $location) {

        $scope.login = function() {

        $cordovaOauth.linkedin(“75ngw7wg5qfd8w”, “2wozWWYfQuwNprua”, [“r_network”, “r_fullprofile”, “r_emailaddress”, “r_basicprofile”, “r_contactinfo”]).then(function(result) {

        $localStorage.accessToken = result.access_token;

        $location.path(“/profile”);

        }, function(error) {

        alert(“There was a problem signing in! See the console for logs”);

        console.log(error);

        });

        };

        });

        linkedinExample.controller(“ProfileController”, function($scope, $http, $localStorage, $location) {

        $scope.init = function() {

        if($localStorage.hasOwnProperty(“accessToken”) === true) {

        $http.get(“https://api.linkedin.com/v1/people/~”, { params: { client_id: $localStorage.accessToken, scope: “r_basicprofile”, state: “”, redirect_uri: “http://localhost/callback” }}).then(function(result) {

        $scope.profileData = result.data;

        }, function(error) {

        alert(console.log(error));

        });

        } else {

        alert(“Not signed in”);

        $location.path(“/login”);

        }

        };

        });

  • dawand

    Hello Nic, thank you for this tutorial! I am not sure why I get null data returned from the feed controller?

    • Are you getting any errors? You might try adding some debugging console.log statements in your code to see where your error resides.

      • dawand

        init() is called but data is null. Do I need to add any plugin for $http.get?

        • You must have an error in your logs. Can you share it?

          My best guess without seeing any code or logs is that you’re getting a CORS type error. Without seeing code or logs, I won’t be able to help you any further.

          Regards,

          • dawand

            I use the same controller code as yours except the change in the name:

            .controller(“FeedCtrl”, function($http, $scope) {
            $scope.init = function() {
            $http.get(“http://ajax.googleapis.com/ajax/services/feed/load”, { params: { “v”: “1.0”, “q”: “https://www.thepolyglotdeveloper.com/feed/” } })
            .success(function(data) {
            $scope.rssTitle = data.responseData.feed.title;
            $scope.rssUrl = data.responseData.feed.feedUrl;
            $scope.rssSiteUrl = data.responseData.feed.link;
            $scope.entries = data.responseData.feed.entries;
            window.localStorage[“entries”] = JSON.stringify(data.responseData.feed.entries);
            })

            .error(function(data) {

            console.log(“ERROR: ” + data);

            if(window.localStorage[“entries”] !== undefined) {

            $scope.entries = JSON.parse(window.localStorage[“entries”]);
            }
            });
            }
            })

            I keep getting the following null messages:

            JS changed: www/js/controllers.js

            0 547291 log ERROR: null

            JS changed: www/js/controllers.js

            0 579009 log ERROR: null

            0 478627 log ERROR: null

            JS changed: www/js/controllers.js

            0 907062 log ERROR: null

            JS changed: www/js/app.js

            0 169864 log ERROR: null

          • Please put your full project on GitHub. Also, please don’t use my blog in your query string.

            Thanks,

  • darrenkitlor

    I get a blank screen where the feed should appear (i.e. between my title bar, tab navigation)

    • Blank screen usually means error in the code. For me, white screens are more commonly typos in some syntax.

      Can you paste your device / simulator logs so we can narrow down the problem?

      Regards,

  • Tony Tortellini

    very nice tutorial i enjoyed making this app, i wanted to ask if its possible to go back in the application after using the inappbrowser cause at the moment if i open an item of the list with news i cant go back to read something else and i have to close the application and reopen.

    • In your window.open command instead of using _system, use _blank. It should give you a Cordova browser that contains a close button.

      Regards,

  • Nice article… The only thing is that I need to change $http request to use an “JSONP” because of CORS problems.

    $http.jsonp(“http://ajax.googleapis.com/ajax/services/feed/load?callback=JSON_CALLBACK”, { params: { “v”: “1.0”, “num”:”10″, “q”: “http://myBlog.blogspot.com/feeds/posts/default” } })

    Thanks!

  • Prince

    Hi Nic can you tell the changes in same code if i am having json feed not the XML feed .What are the changes we have to do in same app

    • I’m not sure what you’re trying to do. Can you explain in detail?

      • Prince

        Actually The $http.get(‘url’)is having JSON data so no need to use google API for converting XML to JSON .Can you tell me the changes in the code

        • I still don’t know what you’re talking about here. Most, if not all, RSS is in XML format. It must be converted to JSON to be used without headache.

          What are you trying to do? I cannot help you unless you share with me what you’re trying to do.

          Regards,

          • Prince

            If RSS feed is in JSON and not in XML so no need to convert . Than what are the changes in your application code to get and display RSS feed

          • Depends on the model of JSON data that you have. The information you provided is very vague, but you’d just do an HTTP request and display the data in AngularJS:

            https://www.thepolyglotdeveloper.com/2014/08/make-http-requests-android-ios-ionicframework/

            There isn’t anything to it. This tutorial still applies, it is just a different API endpoint and different data.

            Regards,

  • Ramo

    Hi Nic,

    Thanks for great job. I have few questions:
    1) How can i show more entry then 4. I can see only 4 entries in my ionic list!
    2) How can i format the publishedDate like “Day, DD.MM YYYY”?
    3) i would show the web page of rss link ff i klick on the Button “Lesen” but the web page of rss link should be shown on a new inoic form

    $) can i show more content from then rss link in the list?

    the code:

    {{entry.title}}
    {{entry.publishedDate}}
    Lesen

    the screen shot: (see the pic)

    thanks

  • kutu

    hi nic, iam very new in ionic and angular, i try your code and your tutorial in my code. finaly, i got error, my ionic serve didnt show anything…

    this is my code in app.js

    rssApp.controller(“FeedController”,function($http,$scope){

    $scope.init = function() {
    $http.get(“http://ajax.googleapis.com/ajax/services/feed/load”, { params: { “v”: “1.0”, “q”: “https://www.thepolyglotdeveloper.com/feed/” } })
    .success(function(data) {
    $scope.rssTitle = data.responseData.feed.title;
    $scope.rssUrl = data.responseData.feed.feedUrl;
    $scope.rssSiteUrl = data.responseData.feed.link;
    $scope.entries = data.responseData.feed.entries;
    window.localStorage[“entries”] = JSON.stringify(data.responseData.feed.entries);
    })
    .error(function(data) {
    console.log(“ERROR: ” + data);
    if(window.localStorage[“entries”] !== undefined) {
    $scope.entries = JSON.parse(window.localStorage[“entries”]);
    }
    });
    }

    $scope.browse = function(v){
    window.open(v,”_system”,”location=yes”);
    }
    });

    when i open console in browser the is rssApp is not defined.
    how can i fix this??

    • I’m not going to look at code in the comments. If you want to show me code please put your full project on GitHub.

      Regards,

      • kutu

        Hi nic, thx for replay.
        the code i put here : https://github.com/kutumaya/ExampleRSSReader
        pls advice me,..

        thanks alot Nic

        • What happened to the rest of your AngularJS code in the app.js file? Having only a controller in there is not going to work.

          I encourage you to do some research on AngularJS as this appears to be your issue.

          Regards,

          • kutu

            Thx your advice nic,..

  • ecommercescripts

    Hi Nic.

    How can I read and list multiple RSS feeds. I tried but I didn’t. Thanks..

    • What are your errors if it didn’t work?

      Regards,

  • Jan-Ole

    Hey Nic,
    first of all great tutorial. Found it on YouTube while I was trying to get used to AngularJS and Ionic.
    Now I know I tried your tutorial already couple of weeks ago and got everything to work just fine. And today I wanted to implement a RSS Reader in a current project and my controller just returns the error function with data null.
    I uploaded the code to GitHub https://github.com/Jan-Ole/Ionic-RSS-Reader
    I thought that I got used to AngularJS and Ionic but somehow it keeps playing jokes on me … I would really appreciated it if you could take a look at the code

    • Do you have any errors in your device logs?

      • Jan-Ole

        nothing I can see it just prompts me “RSS[6161]: ERROR: null”

        • At what point in your code do you get an error response so I know where to look in your code?

          Regards,

  • Charles Okaformbah

    Hi Nic,
    good tutorial I must confess. Please how do I hide other

    elements in the contents returns except the first

    which has an image. I actually want the image in the first paragraph to show or be used while the other paragraphs hidden.

    • You would have to implement your own parser to parse the results of the JSON object.

      Regards,

  • gktgolmz

    My brain is so hot now… I need your help nic.
    I tried your code and i couldn’t run. I can see only {{entry.title}} , it doesn’t loading. Please help me
    http://prntscr.com/8iees6

    • Seeing brackets like that means you have a typo somewhere in your code. Check your log files.

      Regards,

      • gktgolmz

        I add you on skpye can u help me there ? 🙁 I have basic english but i dont have any log files

        • I don’t offer private help so I won’t be Skyping. I’d be happy to help you in the comments, or I can refer you to the forums.

          Regards,

          • gktgolmz

            İ upload my code and i will send you .
            Can u upload lesson’s source ?

          • Sorry it doesn’t work that way. I try to make the articles and videos easy enough to follow. If there are issues, I’d rather people ask questions because they’ll learn it better than just downloading a repository and running it.

            Check your logs like I initially requested:

            https://www.thepolyglotdeveloper.com/2014/12/debugging-android-source-code-adb/

            More than likely you misspelled something in your code. I’ve seen that problem hundreds of times.

            If you don’t understand the logs, paste them and I’ll give you tips. Please do not paste source code.

            Regards,

  • Neil Ferreri

    Nic,

    Thanks so much for the tutorials. I am teacher, not of programming, and built an android app for a school newspaper feed with your example as my starter. I’ve since tried to clone the app on iOS with no luck (at least in the XCode simulators). I’m using Xcode 7.0 on a new Mac with fresh installs of cordova & ionic. Essentially, the code compies and runs, but all I get is the header bar. The feed never loads. I tried this again with a blank app, and your code from this page.

    I don’t know how to debug the xcode project, but there seems to be issues with the device orientation stuff and the inappbrowser. I found this: https://gist.github.com/IgorMinar/863acd413e3925bf282c

    but I have no idea if that is what I need or if I am using it correctly. I added the “angular-ios9-uiwebview.patch.js” file to my WWW folder, and I added a dependency to it in my main app module as it describes in the comments.
    Thanks for any insight!

    • Yea unfortunately Xcode 7 and iOS 9 is having a mess of problems with Ionic Framework and Apache Cordova in general. This actually happens every time Apple releases a new version.

      You might try debugging your iOS application via Safari in development mode. It should act similar to Chrome for debugging Android applications.

      If it truly is an issue with Apache Cordova or the InAppBrowser plugin, the best we can do is wait for a hopefully quick fix by the project developers.

      Best,

      • Neil Ferreri

        Thought I’d share my fingers crossed solution.

        After trying dozens of things, it seems that one of the main issues was with Apple’s new App Transport Security. I found several sources with differing opinions on the matter, but, in the end, what worked was stumbling across and installing the Cordova Transport Security plugin.
        cordova plugin add cordova-plugin-transport-security

        Thanks again for the great resource here!

        • Thanks for linking me to that plugin! I’m going to investigate it and possibly do a blog post on it because everyone is having a ton of trouble with iOS 9.

          Thanks!

          • Neil Ferreri

            No problem…hopefully it helps others too. I’ll look forward to your possible blog post, so I can hopefully understand what I slapped together!

  • Guille Acosta

    Thanks again Nic! This works like a charm.
    Here’s a tip for improve testing using ionic serve and js console:
    I wasn’t able to get JSON, reading Google APIs docs found this

    https://developers.google.com/api-client-library/javascript/features/cors

    to use CORS and make authenticated request to Google APIs.

    Regards.

  • Saber Ouni

    I have this url rss “http://www.eurosport.fr/football/rss.xml” , there is image with title +url +content +publish date , but i can’t get image url , i get just tjis object :

    0: Object
    $$hashKey: “object:58”
    author: “”
    categories: Array[2]
    content: “La Commission d’éthique de la FIFA a suspendu à tour de bras ces derniers jours, notamment Sepp Blatter et Michel Platini. Pour Philippe Auclair, il est vraiment temps de passer à autre chose et d’injecter du sang neuf dans l’institution.”
    contentSnippet: “La Commission d’éthique de la FIFA a suspendu à tour de bras ces derniers jours, notamment Sepp Blatter et Michel Platini. Pour …”
    link: “http://www.eurosport.fr/football/il-est-temps-de-tourner-la-page-la-fifa-a-besoin-de-sang-neuf_sto4947594/story.shtml”
    publishedDate: “Tue, 13 Oct 2015 02:27:41 -0700”
    title: “Il est temps de tourner la page : la FIFA a besoin de sang neuf”
    proto: Object
    Any solution please?

    • Can you call JSON.stringify on your object to serialize it? Might make it easier to see whats up.

      Best,

      • Saber Ouni

        Object avec JSON.stringify
        $scope.feeds [{“title”:”Foot – WTF – Sandie Toletti nettoie la lucarne”,”link”:”http://www.lequipe.fr/Football/Actualites/Sandie-toletti-nettoie-la-lucarne/600704#xtor=RSS-1″,”author”:””,”publishedDate”:”Wed, 21 Oct 2015 03:16:00 -0700″,”contentSnippet”:”La milieu de terrain de Montpellier a marqué un superbe but lors d’un…”,”content”:”La milieu de terrain de Montpellier a marqué un superbe but lors d’un…”,”categories”:[]},{“title”:”Foot – Transfert – Le défenseur marseillais Gaël Andonian prêté à Dijon”,”link”:”http://www.lequipe.fr/Football/Actualites/Le-defenseur-marseillais-gael-andonian-prete-a-dijon/600698#xtor=RSS-1″,”author”:””,”publishedDate”:”Wed, 21 Oct 2015 02:38:00 -0700″,”contentSnippet”:”Comme l’a révélé La Provence, le jeune défenseur de l’OM Gaël…”,”content”:”Comme l'a révélé La Provence, le jeune défenseur de l’OM Gaël…”,”categories”:[]},

        i need to get image with title,content,categories,publisheDate,link from xml ?

        • The Google Feed API will not convert all XML attributes. You’d have to build your own XML to JSON parser if you wish to accomplish that. At first I thought you were getting the image URL and your app wasn’t displaying the image, but now I understand that the field is not present in your JSON.

  • Vitthal Walunj

    Giving me error: No ‘Access-Control-Allow-Origin’ header is present

    XMLHttpRequest cannot load http://ajax.googleapis.com/ajax/services/feed/load?q=http:%2F%2Fblog.nraboy.com%2Ffeed%2F&v=1.0. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.

  • mahadev

    Everthing is fine, it loads the feed perfectly. But when i click on the particular link or article nothing happens, it fails to load the article.

    • What do your logs say?

      • mahadev

        Attempt to remove non-JNI local reference, dumping thread

      • mahadev

        Attempt to remove non-JNI local reference, dumping thread

        No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin. at file:///android_asset/www/plugins/cordova-plugin-whitelist/whitelist.js:25

  • Tony

    Ni Nic, great article!
    But have one question, how hard would be to add notification on new post in RSS? I would like to use Local Notification plugin (not push) that would be trigered when there is new post in RSS. How to do that? Or could you just point me to some example where Local Notification is triggered by new post in RSS or similar http request.
    Thank you!

  • Google seems to have deprecated their Feeds API. Any suggestions on how to do this now?

  • min ho

    haw to get enclosure url

    • You’ll have to read the Google documentation. Like I said numerous times in the post and other comments, Google will not parse your full XML file. It will only parse certain attributes.

      Regards,

  • Min Ho

    haw to get enclosure url

  • DHRUV GOYAL

    hi sir i want to fetch json data of my website through a url on list view in my app and then open or expand the particular item on another page by passing id to know the brief of that item.Plzz help me

  • a_user

    thanks, this has helped alot… but what if i wanted to get responses from multiple feeds like bbc, itv ,etc. how would i change it so that instead of providing one source i can provide multiple

  • Rashid NK

    Hello nic, How to fix the Cross Origin request blocked error

    • Rashid NK

      sorry i didnt read all comments

  • meetdilip

    Hi Nick. Need a small help. How can I make the urls open within the app itself ? Than open in external browser. Thanks.

    • You should not try to do this in hybrid applications. All URLs should be accessed via an external browser. If you wish to embed content in your application you should use APIs instead.

      • meetdilip

        Will you be making a guide on the same ? If possible, please do. Also, would be great if you can tell me how to auto refresh the feed inside the app. Thanks.

  • meetdilip

    How can I check whether there are any new replies ? I am using $interval to auto refresh the Feed. I would like to put entry.title and entry.contentSnippet into local notifications ( if available after refresh ). Help please.

  • Bruno Collaço

    Hey bro, how could we show more rows for the entry content instead of a single one?

    • You could do word wrapping via CSS on the element of you wanted.

  • Bruno Collaço

    How will we survive now that Google API is dead?

  • Jolly Geoff

    hello nic sir

    i have created one post method and i want to call wcf service for [webinvoke(Method=”POST”)] for save method but in ionic the cors error is coming