How do i load more items into my pull to refresh?


#1

Hi Iconic members,
I’ll try and provide as much information as i possibly can.

Currently I’ve started developing an application which will be able to receive recent updates via the pull to refresh feature. I have set up a HTTP-GET and it successfully receives the data from the JSON file and loads it into my pull to refresh. At the moment it’s only loading one specif message. How do i add more so it can receive other notifications/messages via the pull to refresh? I’ll post a picture of my application in action and the post the HTML, Javascript code and the JSON file. If anyone could help me add more messages to my application from the JSON file or point me in the correct direction i would really appreciate it!

This is what my application looks like when i pull down the pull to refresh loads the information from the JSON file.



This is what my JSON file. I don’t understand how i can load ExampleMessage2 into my application.

{
    "response1": [
        {"announcement_name": "ExampleMessage1"},
        {"date": "26/05/2015"},
        {"message": "ExampleMessage1"}
    ],
    "response2": [
        {"announcement_name": "ExampleMessage2"},
        {"date": "27/05/2015"},
        {"message": "ExampleMessage2"}
    ]
}

This is my JavaScript file. This receives the data from the webhost.
.controller('Controller', function($scope, $http) {
    $scope.items = [1,2,3];
    $scope.doRefresh = function() {
        $http.get("http://www.wikicode.co.uk/announcement.json")
            .success(function(data) {
                $scope.announcement_name = data.announcement_name;
                $scope.date = data.date;
                $scope.message = data.message;
            })
            .finally(function() {
           // Stop the ion-refresher from spinning
           $scope.$broadcast('scroll.refreshComplete');
         });
      };
    });

And finally this is my HTML document which loads the data into the div form.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Announcement</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="Announcement">
    <ion-view view-title="Announcements">
      <ion-pane>
         <ion-header-bar class="bar-positive">
          <h1 class="title">Pull To Refresh</h1>
        </ion-header-bar>
        <ion-view view-title="Announcements">
        <ion-content ng-controller="Controller">
          <ion-refresher on-refresh="doRefresh()">

          </ion-refresher>
          <ion-list>
            <ion-item ng-repeat="item in items" ng-click="getData()">

            <div class="list card">
              <div class="item item-divider">{{announcement_name}} - {{date}}</div>
              <div class="item item-body">
                <div>
                  {{message}}
                </div>
            </ion-item>
          </ion-list>
        </ion-content>
        </ion-view>
  </body>
</html>

#2

I will create my JSON file like this.

[
    {
        "response1": {
            "announcement_name": "ExampleMessage1",
            "date": "26/05/2015",
            "message": "ExampleMessage1"
        },
        "response2": {
            "announcement_name": "ExampleMessage2",
            "date": "27/05/2015",
            "message": "ExampleMessage2"
        }
    }
]

and where $http.get(url).success(function(data)) the “data” is an array of objects.
Hope to help you.