CODEWITHSUNDEEP
javascriptangularjsjsonionic-framework
vbordo
vbordo

Reputation: 13

Cannot display successful angularjs $http get response from local server in ionic template

I cannot for the life of me get this json response to render in my tab-dash view for my Ionic app. The response from the local server is logged as 200 but I cannot render the json to the view! I have followed this tutorial for structuring the factory and controller http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html and referred to stackoverflow questions surrounding the topic:

  1. unable to display the http get response from the factory in controller in Angularjs application

  2. Outputting JSON Data from Local Web Server onto Ionic App using Angular

  3. Angularjs $http.get does not work

  4. Angularjs $http.get not working

I've included my controller.js, the factory responsible for executing the api call, and the template code. Thanks in advance for any help provided I appreciate it!

controller.js 

(function(){

    angular.module('athenaApp.controllers', [])

        .controller('DashCtrl', function($scope, athenaApiService, $timeout) {

            athenaApiService.getArticles().then(function(data){
                $scope.news = data;
           })
      })

}());

services.js

.factory('athenaApiService', function($http){

    return{
        getArticles: function(){
            return $http.get('http://localhost:8000/athenaAPI/articles').then(function(result){
                return result.data;
            });
        }
    }
});

tab-dash.html

 <ion-view view-title="News">
  <ion-content>
      <ion-refresher on-refresh="doRefresh()">
      </ion-refresher>
      {{news}}
      <ion-list ng-repeat='article in news'>
        <a class="item item-thumbnail-left" href="#/tab/news/{{article.id}}"> <!-- "#/tab/news/{{article.id}}" -->
          <img src='../img/ionic.png'>
          <div class='item item-text-wrap'>
              <h3>{{article.headline}}</h3>
              <p>{{article.byline}}</p>
          </div>
        </a>
      </ion-list>
  </ion-content>
</ion-view>

server output

Listening on port: 8000
Articles Requested...
[ { id: 0,
    headline: 'Headline 0',
    byline: 'Author 0',
    datePublished: '3/4/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' },
  { id: 1,
    headline: 'Headline 1',
    byline: 'Author 0',
    datePublished: '3/5/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' },
  { id: 2,
    headline: 'Headline 2',
    byline: 'Author 0',
    datePublished: '3/6/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' },
  { id: 3,
    headline: 'Headline 3',
    byline: 'Author 0',
    datePublished: '3/7/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' } ]
GET /athenaAPI/articles 200 39.072 ms - 669

Upvotes: 1

Views: 1281

Answers (2)

GONeale
GONeale

Reputation: 26494

Sorry vbordo, I was busy making a CodePen for you, but I found a few ways to improve what you were trying to do. <ion-list> suggests best practice by repeating via an ion-item, also I would recommend using angular.forEach to build your $scope.news array so you aren't obliterating the angular array binding.

Please see my working code sample with a sample JSON data set using your athena data service.

http://codepen.io/goneale/pen/ONbRrr?editors=1011

Upvotes: 0

George Chen
George Chen

Reputation: 6939

the result is an array, that is why result.data is undefined. Just return the promise directly.

getArticles: function(){
        return   $http.get('http://localhost:8000/athenaAPI/articles');
}

Upvotes: 1

Related Questions