3

I am building a quick Angular app that uses a service to grab a JSON from a URL.

The JSON structure looks like this:

{news:[{title:"title",description:'decription'},
       {title:"title",description:'decription'},
       {title:"title",description:'decription'}
      ]};

What I need is just the array within the news object.

My code to import the JSON is as follows:

app.factory('getNews', ['$http', function($http) { 
  return $http.get('URL') 
        .success(function(data) { 
          return data; 
        }) 
        .error(function(err) { 
          return err; 
        }); 
}]);

Then to add the data to the $scope object in the controller I do this:

app.controller('MainController', ['$scope','getNews', function($scope, getNews) {
getNews.success(function(data)) {
    $scope.newsInfo = data.news;
    });

});

But it doesn't work. When I load the html page, there is only white. My thinking is that this is because it isn't grabbing the array within the JSON and using that data to populate the HTML directive I set up.

newsInfo.js:

app.directive('newsInfo',function(){
  return {
    restrict: 'E',
    scope: {
  info: '='
},
templateUrl:'newsInfo.html'
  };
    });

newsInfo.html:

<h2>{{ info.title }}</h2>
<p>{{ info.published }}</p>

My HTML doc is:

<head>      
    <title></title>

    <!--src for AngularJS library--> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>

<body ng-app="THE APP NAME"> <!--insert ng app here-->
    <div ng-controller="MainController"> <!--insert ng controller here-->
        <div ng-repeat="news in newsInfo"><!--insert ng repeat here-->
            <!-- directive goes here-->
            <newsInfo info="news"></newsInfo>
        </div>
    </div>



    <!-- Modules -->
    <script src="app.js"></script>

    <!-- Controllers -->
    <script src="MainController.js"></script>

    <!-- Services -->
    <script src="getNews.js"></script>

    <!-- Directives -->
    <script src="newsInfo.js"></script>
</body>

Thoughts?

Improve this question
13
  • provide the code of html Commented Aug 13, 2015 at 2:14
  • Posting all code is relevant. Also, put something non related into the html will tell you something as well. If it's still white, has nothing to do with the service. Commented Aug 13, 2015 at 2:17
  • without seeing your HTML page it's hard to say exactly what's occurring, but my first guess is that angular fails to load, because you have an error in your code. the way you are calling your factory here seems strange to me. Commented Aug 13, 2015 at 2:18
  • so with that update, it's clear that if newsInfo is empty, you will not display anything. Are you getting any error messages that might explain why newsInfo would be empty? Commented Aug 13, 2015 at 2:21
  • posted the HTML. If I replace the directive with a normal div and a test <p>, it shows up. So I guess it's on Angular's end. Also, what about the way I call my factory is weird? Commented Aug 13, 2015 at 2:21

4 Answers 4

Reset to default
2

Change 

<newsInfo info="news"></newsInfo>

to

<news-info info="news"></news-info>

example: https://jsfiddle.net/bhv0zvhw/3/

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

Comments

1

You haven't specified the controller.

<div ng-controller="MainController"> <!--insert ng controller here-->
    <div ng-repeat="news in newsInfo"><!--insert ng repeat here-->
        <!-- directive goes here-->
        <newsInfo info="news"></newsInfo>
    </div>
</div>
Improve this answer

1 Comment

Make sure you are assigning correct data to the variable, as Martin Ciz suggested in the other answer $scope.newsInfo = data.news;
0 
$scope.getNews = function(){
    return $http.get('URL').success(function(data) { 
      return data.news; 
    })
};

^ This, just change it so that the success function returns only the news!

Improve this answer

Comments

0

While I am answering my own question, I should point out that everyone's answers were also correct. The code had multiple errors, but the final error was fixed by doing the following:

Apparently I had to upload the newsInfo.html doc to an S3 bucket and use that URL as “Cross origin requests are only supported for HTTP.” But then Angular blocked that external source with the Error: "$sce:insecurl Processing of a Resource from Untrusted Source Blocked".

So since the html template was so simple, i just bipassed this issue by typing in the template directly into the .js directive and it worked! thanks everyone for the help!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.