Utilizing AngularJS for Showcasing JSON Information Using Ng-Repeat and Ng-Factory

Question

Utilizing AngularJS for Showcasing JSON Information Using Ng-Repeat and Ng-Factory

As a newcomer to Javascript and Angular, I am currently working on integrating AngularJS into my website. Despite watching tutorials from CodeSchool, Egghead, and others, I seem to be stuck at the very beginning.

My issue lies in retrieving JSON data from my server and displaying it on my website. Below is the code snippet I have been working on;

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: I appreciate all the responses, but I believe I need to call the data in the controller like this;

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

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

$scope.mangas=isimler();

This approach allows me to use the data multiple times, especially when using it with the ui-router extension.

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

javascript json angularjs

Answer 1

Answer №1

If I were to structure a factory, it would look like this:

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

The issue at hand:

You should not do this

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

$http.get() is an asynchronous call. This means that the content within your success function will be executed later without interrupting the JS execution flow. Your return alHemen is ultimately invoked before the assignment alHemen = data

In my opinion, handling the call should be done by the controller. The factory should only expose methods for making calls. It's better to directly return the promise and let the controller handle it.

EDIT

By using ui router, you can utilize a promise in the resolve section to access it in your controller.

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

You can then access it in your controller by injecting it like this:

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

Refer to this documentation for more information on resolve.

Answer 2

If I were to structure a factory, it would look like this:

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

The issue at hand:

You should not do this

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

$http.get() is an asynchronous call. This means that the content within your success function will be executed later without interrupting the JS execution flow. Your return alHemen is ultimately invoked before the assignment alHemen = data

In my opinion, handling the call should be done by the controller. The factory should only expose methods for making calls. It's better to directly return the promise and let the controller handle it.

EDIT

By using ui router, you can utilize a promise in the resolve section to access it in your controller.

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

You can then access it in your controller by injecting it like this:

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

Refer to this documentation for more information on resolve.

Answer 3

Answer №2

One issue is that the http call is asynchronous in nature.

angular.module('nasuh',[])

    .factory('MY', function($http){
         return  {
              names: function() {
              var getNow;
              var url = 'http://localhost/remote.php?callback=JSON_CALLBACK';
              $http.get(url).success(function(data) {
              getNow = data;
              });
              return getNow; // This line executes before receiving a response.
            }
          };
        })

Angularjs provides a different approach to handle this situation. You should return a promise from the 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;
            });

To use this in a controller, you can do the following:

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

     });

Answer 4

One issue is that the http call is asynchronous in nature.

angular.module('nasuh',[])

    .factory('MY', function($http){
         return  {
              names: function() {
              var getNow;
              var url = 'http://localhost/remote.php?callback=JSON_CALLBACK';
              $http.get(url).success(function(data) {
              getNow = data;
              });
              return getNow; // This line executes before receiving a response.
            }
          };
        })

Angularjs provides a different approach to handle this situation. You should return a promise from the 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;
            });

To use this in a controller, you can do the following:

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

     });

Utilizing AngularJS for Showcasing JSON Information Using Ng-Repeat and Ng-Factory

Answer №1

EDIT

Answer №2

Similar questions

Challenges encountered with the "load" event handler when creating a Firefox Extension

Steps to display content post authentication using JWT

ReactJS is struggling to showcase an image stored in the backend folder with the help of node

Error message: "The property or method you are trying to access is not defined

What is the best way to show a UIActivityIndicatorView while fetching JSON data asynchronously and then displaying it in a UITableView?

Guide on extracting an Array from JSON in a $.ajax response

JavaScript application that features an audio player complete with a dynamic progress bar and customizable tags

How can we convert an NSString obtained from a web service to an NSDate in Objective C?

Using Vue.js within Cordova platform allows developers to create dynamic

bespoke HTML elements and properties

Displaying updated character counts in Angular directive based on various triggers

Using Angular UI Router to Access $scope Beyond the Scope of the UI View

`The resurgence of CERT_FindUserCertByUsage function in JavaScript`

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

bespoke filter designed to conceal any negative figures

Tips for preventing the creation of an element in AngularJS

Breaking Down URLs with JavaScript

Encountered a MongoNetworkError while attempting to establish a connection with the server at localhost:27017. The initial connection failed due to an ECONNREFUSED error at 127.0.0.1:

Accessing the first child node in JsTree

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`