CODEWITHSUNDEEP
javascriptangularjsonsen-ui
Rich Ozil
Rich Ozil

Reputation: 21

Onsen angular js api call

I dont know if this is an angular js problem. Anyway, I am using onsen ui for my mobile app and I need a way to transition from one page to another and have the data shared between those pages .below is my app.js code. 

// Wordpress Posts Controller
var app = angular.module('myApp', []);
app.controller('PostsController', function($scope, $http, PostsData) {

    $http({method: 'GET', url: 'http://akufoaddo2016.com/api/get_recent_posts/'}).
    success(function(data, status, headers, config) {
        $scope.posts = data.posts;

    }).
    error(function(data, status, headers, config) {

    });

    $scope.showDetail = function(index) {
    var selectedItem = $scope.posts[index];
    PostsData.selectedItem = selectedItem;
    $scope.ons.navigator.pushPage('page4.html', selectedItem);
    }

});

The page i want to show the data on is page4.html and the code is below. 

<ons-page ng-controller="PostsController">
<ons-toolbar style="background-color: #132e42" >
            <div class="left">
                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="ion-android-more-vertical" style="color: #fff"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center" style="font-weight:bold; color:#fff;">Nana Akuffu Addo</div>             
        </ons-toolbar>

    <ons-scroller>

        <div  ng-app="myApp" ng-repeat="post in posts">
        <ons-row >
        <h3 class="title" ng-click="showDetail($index)">{{post.title}}</h3>
        <p>{{post.excerpt}}</p>
        </ons-row>
        </div>

    </ons-scroller>

</ons-page>

I dont know what i am doing wrong ; it just wont print any value .

If you are wondering how the json data looks like :

{
  "count": 2,
  "status": "ok",
  "count_total": 2,
  "pages": 1,
  "posts": [
    {
      "id": 4,
      "type": "post",
      "slug": "nana-akufo-addo-visits-pentecost-convention-centre",
      "url": "http://akufoaddo2016.com/2016/01/17/nana-akufo-addo-visits-pentecost-convention-centre/",
      "status": "publish",
      "title": "NANA AKUFO &#8211; ADDO VISITS PENTECOST CONVENTION CENTRE",
      "title_plain": "NANA AKUFO &#8211; ADDO VISITS PENTECOST CONVENTION CENTRE",
      "content": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa.  <a href=\"http://akufoaddo2016.com/2016/01/17/nana-akufo-addo-visits-pentecost-convention-centre/#more-4\" class=\"more-link\">Read more</a></p>\n",
      "excerpt": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa.</p>\n",
      "date": "2016-01-17 23:56:42",
      "modified": "2016-01-17 23:56:42",
      "categories": [
        {
          "id": 2,
          "slug": "blog",
          "title": "Blog",
          "description": "",
          "parent": 0,
          "post_count": 1
        }
      ],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "admin",
        "name": "admin",
        "first_name": "",
        "last_name": "",
        "nickname": "admin",
        "url": "",
        "description": ""
      },
      "comments": [],
      "attachments": [
        {
          "id": 5,
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "slug": "akufoaddo-pentecost-jan16",
          "title": "akufoaddo-pentecost-jan16",
          "description": "",
          "caption": "",
          "parent": 4,
          "mime_type": "image/jpeg",
          "images": {
            "full": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            },
            "thumbnail": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
              "width": 150,
              "height": 150
            },
            "medium": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
              "width": 300,
              "height": 233
            },
            "medium_large": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            },
            "large": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            },
            "post-thumbnail": {
              "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
              "width": 430,
              "height": 334
            }
          }
        }
      ],
      "comment_count": 0,
      "comment_status": "open",
      "thumbnail": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
      "custom_fields": {},
      "thumbnail_size": "post-thumbnail",
      "thumbnail_images": {
        "full": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        },
        "thumbnail": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
          "width": 150,
          "height": 150
        },
        "medium": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
          "width": 300,
          "height": 233
        },
        "medium_large": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        },
        "large": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        },
        "post-thumbnail": {
          "url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
          "width": 430,
          "height": 334
        }
      }
    },
    {
      "id": 1,
      "type": "post",
      "slug": "hello-world",
      "url": "http://akufoaddo2016.com/2016/01/13/hello-world/",
      "status": "publish",
      "title": "Hello world!",
      "title_plain": "Hello world!",
      "content": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
      "excerpt": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
      "date": "2016-01-13 21:24:36",
      "modified": "2016-01-13 21:24:36",
      "categories": [],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "admin",
        "name": "admin",
        "first_name": "",
        "last_name": "",
        "nickname": "admin",
        "url": "",
        "description": ""
      },
      "comments": [
        {
          "id": 1,
          "name": "Mr WordPress",
          "url": "https://wordpress.org/",
          "date": "2016-01-13 21:24:36",
          "content": "<p>Hi, this is a comment.<br />\nTo delete a comment, just log in and view the post&#039;s comments. There you will have the option to edit or delete them.</p>\n",
          "parent": 0
        }
      ],
      "attachments": [],
      "comment_count": 1,
      "comment_status": "open",
      "custom_fields": {}
    }
  ]
}

Thanks for your help.

Upvotes: 2

Views: 256

Answers (1)

Patrick Klitzke
Patrick Klitzke

Reputation: 1559

When you push some data from one controller to another, it will be saved in the navigator.getCurrentPage().options object, so something like that should work.

angular.module('app').controller('FirstController', function ($scope, $http) { 
  // .. get myData somehow from the page
  navi.pushPage('second-page.html', {myData: myData});
}

angular.module('app').controller('SecondController', function ($scope, $http) { 
   // read the data that that was given by pushPage
   $scope.data =  navi.getCurrentPage().options.myData;
}

Upvotes: 0

Related Questions