JSON Feed FrontPage App

Hello!
Where can I change the JSON Feed in the FrontPage App?

Best Regards,
Luca

In the www/js/services.js file… you may want to do some reading first to get yourself familiar with some basics to be able to find this kind of stuff. :smile:

I recommend starting with Structure of an Ionic App followed by Ionic: Using Factories and Web Services for Dynamic Data.

1 Like

Thanks for your quick answer.
Ok I have found the apiURL: http://hn-api.ionic.io/
My question is now where is the json feed?
I expected something like this: http://www.w3schools.com/website/Customers_JSON.php
Maybe I missunderstand something…
Thanks a lot for the links… I am reading a little bit, but my english is not very good… (I am from Austria)
I hope someone can help me.

Luca

Okay, so. You found the base url.

var apiURL = 'http://hn-api.ionic.io/'

If you look further down, you can see that there are different methods of this service (frontpage,newest,comments, etc) that use this base URL with some parameters added onto it. For example, the frontpage method:

frontpage: function(page) {
      var q = $q.defer();
      $http.get(apiURL+'frontpage/'+page, config)
        .then(function(result){
          return !validateResponse(result)? q.reject(new Error('Invalid Response')):q.resolve(result.data);
        },function(err){
          console.log('frontpage/'+page+' Failed');
          q.reject(err);
        });
      return q.promise;
    },

Pay attention tot this line:

$http.get(apiURL+'frontpage/'+page, config)

We’re taking the apiUrl (“http://hn-api.ionic.io/”) and adding on “fontpage/1” (put in the 1 as an example) which creates the full url of:

http://hn-api.ionic.io/frontpage/1

Try opening that URL in your browser and you should get a JSON response. :smile:

Note: That API seems to be having difficulties at the moment.

Note 2: Appears they are migrating the API to a new server at the moment. https://twitter.com/maxlynch/status/546367426448089089

You have found the domain and the sub-domain name with extension. That is all good. Now you have to set the path name.

example:

protocol://www.sub-domain-name.domain-name.extension/myFolder/myJson.json
http://www. weatherApi.yahoo.com/weather.json

Ok. Now I think I realize it… I am usual more a webdesigner, not a developer :smiley:
Only to understand I have tried to add the JSON feed from w3schools (as test):

var apiURL = ‘http://www.w3schools.com/website/’,

frontpage: function(page) { var q = $q.defer(); $http.get(apiURL+'Customers_JSON.php', config)

And in the tab-feed.html I have change the tags to:
{{post.Name}}

Now when I refresh the frontpage on browser I see for short time the names but than everything is removed and only header and footer are visible.

Where is the issues?

Thanks a lot!
great help! :smile:

Trying a json GET request and having trouble posting from a RestAPI.
shop.html

<ion-view title="Shop">
<ion-content>
<ion-refresher on-refresh="doRefresh()">
                 
</ion-refresher>
<div class="button-bar bar-energized">
<a class="button">Birds</a>
<a class="button">Cats</a>
<a class="button">Dogs</a>
</div>

<div class="list">

<a class="item item-thumbnail-left" href="#">
<img src="{{img}}">
<h2>{{h2}}</h2>
  <p>{{subtitle}}</p>
</a>


</div>
</ion-content>
</ion-view>

shop-detail.html

<ion-view title="{{productName}}">
<ion-content has-header="true" padding="true">
</ion-content>
</ion-view>

services.js

angular.module('starter.services', [])

/**
* A simple example service that returns some data.
*/
.factory('Shop', function() {
// Might use a resource here that returns a JSON array

// Some fake testing data
var apiURL = 'http://www.verizonwireless.com/deals-landing/apple+htc+lg+motorola+samsung+verizon/all-deals/',
config = {timeout: 10000};

function validateResponse(result){
return !(typeof result.data != 'array' && typeof result.data != 'object');
}

return{
// enter a request's reponse in to the cache
search: function(query){
var q = $q.defer();
$http.get(apiURL+query, config)
.then(function(result){
return !validateResponse(result)? q.reject(new Error('Invalid Response')):q.resolve(result.data);
},function(err){
console.log('Query '+page+' Failed');
q.reject(err);
});
return q.promise;
}
}
});
and the controllers.js
angular.module('starter.controllers', [])

.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
$scope.startApp = function() {
$state.go('tab.dash');
window.localStorage.didTutorial = true;
};
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
 };
})

.controller('DashCtrl', function($scope) {
})

.controller('ShopCtrl', function($scope,$state, $http, $templateCache, Shop) {
 $scope.doRefresh = function() {
    
    console.log('Refreshing!');
    $timeout( function() {
      //simulate async response
      $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    
    }, 1000);
      
  };
  
   $scope.method = 'GET';
   $scope.url = 'www.url.com';

        $scope.fetch = function() {
            $scope.code = null;
            $scope.response = null;

            $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
            success(function(data, status) {
                $scope.data = data || "Request Failed";
                $scope.status = status;

            });
        };
    $scope.updateModel = function(method, url) {
        $scope.method = method;
        $scope.url = url;
    };
})

.controller('ShopDetailCtrl', function($scope, $stateParams, Shop) {
    $scope.shop = Shop.get($stateParams.shopId);
})

.controller('AccountCtrl', function($scope) {
})

.controller('BluetoothCtrl', function($scope) {
});