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

Question

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:

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

Can you post your result.data here? Open your browser dev console, check if the http request success. Also, for debugging purpose, you could add {{news}} after </ion-refresher> — George Chen
– George Chen, Commented Mar 15, 2016 at 0:54
Do you try console.log(data); in your controller? If there is no data and server response OK, maybe you could check CSP rules and <access> tag in config.xml. — user6032296
– user6032296, Commented Mar 15, 2016 at 1:40
@AwakeningByte Apparently result.data is empty because when adding {{news}} as instructed nothing appears in the view. I've added the server output to demonstrate the success of the get request and the json that is in the response. — vbordo
– vbordo, Commented Mar 15, 2016 at 2:16
ha ha, I get caught by this mistake many times. The result is an array. that is why result.data is empty. see my answer below — George Chen
– George Chen, Commented Mar 15, 2016 at 3:04
to make sure the binding is correct. add line $scope.test = "test" in controller, and add {{test}} in html. — George Chen
– George Chen, Commented Mar 15, 2016 at 3:44

George Chen · Accepted Answer · 2016-03-15 03:05:34Z

1

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');
}

answered Mar 15, 2016 at 3:05

George Chen

6,9895 gold badges23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

vbordo Over a year ago

Made the change and still no luck my friend.

vbordo Over a year ago

Yes, still completely empty. I must be doing something excessively stupid. Any other ideas about what could be going on?

George Chen Over a year ago

do you bind to $scope or using controllerAs

vbordo Over a year ago

bind to $scope at the moment

George Chen Over a year ago

Then I don't see any reason why it doesn't work if the call to localhost:8000/athenaAPI/articles succeed. Last thought, replace $scope.news = data to $scope.news = [{ id: 0, headline: 'Headline 0', byline: 'Author 0', datePublished: '3/4/5', content: { para0: 'This is a sentence', para1: 'And another sentence.' }, originalUrl: '' }] this should show something on the view

|

GONeale · Accepted Answer · 2016-03-15 04:14:43Z

0

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

answered Mar 15, 2016 at 4:14

GONeale

26.5k22 gold badges111 silver badges149 bronze badges

2 Comments

vbordo Over a year ago

This is great @GONeale I'll definitely have to refactor according to your helpful example thanks so much!

GONeale Over a year ago

No problem. Glad it could be of help.

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related