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

Personalized JSON response type for AJAX requests

ObservableResolve(): Unleashing the power of RxJS5 for handling asynchronous data streams

I'm stumped as to why I'm having trouble loading JSON data into a DataFrame

Linking the value of an expression to ngModel

What is the best way to extract a specific value from my JSON requests?

Just dipping my toes into the world of backend development and diving into the intric

Animate the service item with jQuery using slide toggle effect

Ways to compel $scope to re-compile its contents and re-establish directive links

What is the best way to create a scrollable Material UI modal and dialog?

Issues with using the $http call in Ionic Android builds are causing problems

Setting the base path for a statically exported NextJS app

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

Leveraging AngularJs to extract IMEI information and identify NFC tap interactions

Simple Mobile-Friendly Tabs - mobile tabs are always visible

Unveil the Expressjs middleware within the API Client

Implementing authorization middleware using Express.js in Ajax

Error in delete operation due to CORS in Flask API

Steps to add new nodes to a JSON file on a server using PHP

pg-promise received an error due to an incorrect parameter being passed in for options

Runtime.UnhandledPromiseRejection - Oops! Looks like we're trying to read properties of something that doesn't exist (specifically 'headers')