AngularJS, Display Json Data With Ng-Repeat and Ng-Factory

Question

I am a beginner at Javascript and Angular, and I'm trying to implement AngularJS on my website. I have watching tutorials on CodeSchool, Egghead etc. But I am stack at very beginning.

Getting JSON data from my server and displaying it on my website. Here is my code;

JS:

angular.module('nasuh',[])
.factory('MY', function($http){
     return  {
          isimler: function() {
          var alHemen;
          var url = 'http://localhost/uzak/remote.php?callback=JSON_CALLBACK';
          $http.get(url).success(function(data) {
          alHemen = data;
          });
          return alHemen;
        }
      };
    })
.controller('nbgCtrl', function($scope, $http, MY) {
         $scope.mangas = MY.isimler();  
     })

HTML:

<html ng-app = "nasuh">
<body ng-controller = "nbgCtrl">
<div class="col s12 m6 l4" ng-repeat = "manga in mangas"> -----> Want to repeat
        <div class="row">
        <div class="col s5">
            <a href="#" class="thumbnail">
            <img src="/kapaklar/{{manga.kapak}}">
            </a>
        </div>
        <div class="col s7">
           <p>{{manga.ad}}</p>

           <a href="" class="waves-effect waves-light btn"></a>

</div>
</div>
</div>

JSON:

 [{"id":"1","ad":"Naruto","yazar":"Masashi KISHIMOTO","kapak":"naruto.jpg"},
 {"id":"2","ad":"One Piece","yazar":"Eiichiro ODA","kapak":"one_piece.jpg"}]

Edit-1: Thank you all for your responses but I think I need calling data at the controller like;

  .factory('MY',
  return {
  isimler: function() {

.................................

$scope.mangas=isimler();

Because I need to use this data more than once and using it at ui-router extension.

$stateProvider
.state('icerik', {
  url: "/icerik",
  templateUrl: "icerik.html"
   controller: $scope.mangas = isimler();
})

what is your error coming?

NeiL
– NeiL

2015-06-10 10:10:29 +00:00
Commented Jun 10, 2015 at 10:10 — NeiL
– NeiL, Commented Jun 10, 2015 at 10:10

Okazari · Accepted Answer · 2015-06-10 14:37:39Z

2

I would do your factory this way :

angular.module('nasuh',[])
.factory('MY', function($http){
     var factory = {};
     var url = '/uzak/remote.php?callback=JSON_CALLBACK';
     //I return the $http promise directly when you use MY.isimler
     factory.isimler = $http.get(url);
     return factory;
    })
.controller('nbgCtrl', function($scope, MY) {
         //I handle here the success of the $http call
         MY.isimler.success(function(alHemen){
              $scope.mangas = alHemen;
         });  
     })

Your error :

You can't do this

      $http.get(url).success(function(data) {
          alHemen = data;
      });
      return alHemen;

$http.get() is an asynchronous call. It mean that the content of your success function will be executed later without stopping the JS execution. Your return alHemen is finaly invoked before the alHemen = data

In my humble opinion handling the call is the responsibility of the controller. the factory just exposes the methods to do the calls. I prefer to directly return the promise and let the controller do the job of handling it.

EDIT

With ui router you can use a promise into the resolve part to get it into your controller.

$stateProvider
.state('icerik', {
  url: "/icerik",
  templateUrl: "icerik.html",
  controller: "nbgCtrl",
  resolve: {
     isimler : function(MY){
        return MY.isimler;
     }
  }
})

You will be able to access it like this into your controller (just inject it) :

.controller('nbgCtrl', function($scope, isimler) {
     $scope.mangas = isimler;  
 })

Here is some documentation about resolve.

edited Jun 10, 2015 at 14:37

answered Jun 10, 2015 at 10:10

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

4 Comments

Nasuh Over a year ago

Its worked. Thank you. I dont know some basics of Javascript so sorry for bringing such a easy question to stackoverflow andd disturbing you guys.

Okazari Over a year ago

@Nasuh What do you need ?

Nasuh Over a year ago

But we did not add the .success(function(){} part to resolve? And I am gonna use diffrent controller mmgCtrl.

Okazari Over a year ago

@Nasuh just use it instead. The resolve can handle a promise. It will do it for you. You dont need it.

NeiL · Accepted Answer · 2015-06-10 10:20:59Z

Problem is that http call is asynchronous.

angular.module('nasuh',[])

    .factory('MY', function($http){
         return  {
              isimler: function() {
              var alHemen;
              var url = 'http://localhost/uzak/remote.php?callback=JSON_CALLBACK';
              $http.get(url).success(function(data) {
              alHemen = data;
              });
              return alHemen; // this line run before you get response.
            }
          };
        })

Angularjs has different way of dealing with this. You need to return promise from factory. For example-

 .factory('MY', function($http,$q){
           var myFactory;
             myFactory.getJson= function(){
                var promise = $http
                .get('URLURLURL')
                .then(function (response) {
                    return response.data;
                },function (response) {
                    return $q.reject(response);
                });
            return promise;
    };
    return myFactory;
            });

For using this in controller. Use like this

.controller('nbgCtrl', function($scope, MY) {
MY.getJson().then(function(data){
                      $scope.mangas = data;
                    });

     });

Collectives™ on Stack Overflow

AngularJS, Display Json Data With Ng-Repeat and Ng-Factory

2 Answers 2

EDIT

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related