# JSON Feed FrontPage App

**URL:** <https://forum.ionicframework.com/t/json-feed-frontpage-app/14485>\
**Category:** demo\
**Created:** [December 19, 2014, 8:20pm UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485 "2014-12-19T20:20:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![LionStudio](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@LionStudio](https://forum.ionicframework.com/u/LionStudio)\
**Post date:** [December 19, 2014, 8:20pm UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485/1 "2014-12-19T20:20:15Z")

</div>

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

Best Regards,  
Luca

---

<div class="post-metadata">

**Author:** ![andrewmcgivery](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andrewmcgivery/32/65523_2.png) [@andrewmcgivery](https://forum.ionicframework.com/u/andrewmcgivery)\
**Post date:** [December 19, 2014, 8:59pm UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485/2 "2014-12-19T20:59:34Z")

</div>

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. 😄

I recommend starting with [Structure of an Ionic App](http://mcgivery.com/structure-of-an-ionic-app/) followed by [Ionic: Using Factories and Web Services for Dynamic Data](http://mcgivery.com/ionic-using-factories-and-web-services-for-dynamic-data/).

---

<div class="post-metadata">

**Author:** ![LionStudio](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@LionStudio](https://forum.ionicframework.com/u/LionStudio)\
**Post date:** [December 20, 2014, 12:21pm UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485/3 "2014-12-20T12:21:30Z")

</div>

Thanks for your quick answer.  
Ok I have found the apiURL: [http://hn-api.ionic.io/](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](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

---

<div class="post-metadata">

**Author:** ![andrewmcgivery](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andrewmcgivery/32/65523_2.png) [@andrewmcgivery](https://forum.ionicframework.com/u/andrewmcgivery)\
**Post date:** [December 20, 2014, 6:10pm UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485/4 "2014-12-20T18:10:38Z")

</div>

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/](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. 😄

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](https://twitter.com/maxlynch/status/546367426448089089)

---

<div class="post-metadata">

**Author:** ![siddhartha](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@siddhartha](https://forum.ionicframework.com/u/siddhartha)\
**Post date:** [December 20, 2014, 6:15pm UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485/5 "2014-12-20T18:15:15Z")

</div>

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
```

---

<div class="post-metadata">

**Author:** ![LionStudio](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@LionStudio](https://forum.ionicframework.com/u/LionStudio)\
**Post date:** [December 20, 2014, 8:05pm UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485/6 "2014-12-20T20:05:57Z")

</div>

Ok. Now I think I realize it… I am usual more a webdesigner, not a developer 😃  
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! 😄

---

<div class="post-metadata">

**Author:** ![selectiveSteve](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@selectiveSteve](https://forum.ionicframework.com/u/selectiveSteve)\
**Post date:** [January 19, 2015, 12:04am UTC](https://forum.ionicframework.com/t/json-feed-frontpage-app/14485/7 "2015-01-19T00:04:09Z")

</div>

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) {
});
```