如何使用angularJS從JSON網址獲取數據

Question

**這是我的service.js文件。這段代碼不工作是什麼錯誤。以及如何創建服務文件。該鏈接將執行產品的類別列表。該方案是當我點擊需要展示產品的類別時。 **

angular.module('directory.services', []) 

.factory('EmployeeService', function($q) { 

    return $http.get('http://localhost/youtubewebservice/shop-categorylist-product.php') 

    return { 
     findAll: function() { 
      var deferred = $q.defer(); 
      deferred.resolve(employees); 
      return deferred.promise; 
     }, 

     findById: function(employeeId) { 
      var deferred = $q.defer(); 
      var employee = employees[employeeId - 1]; 
      deferred.resolve(employee); 
      return deferred.promise; 
     }, 

     findByName: function(searchKey) { 
      var deferred = $q.defer(); 
      var results = employees.filter(function(element) { 
       var fullName = element.firstName + " " + element.lastName; 
       return fullName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1; 
      }); 
      deferred.resolve(results); 
      return deferred.promise; 
     }, 

     findByManager: function (managerId) { 
      var deferred = $q.defer(), 
       results = employees.filter(function (element) { 
        return parseInt(managerId) === element.managerId; 
       }); 
      deferred.resolve(results); 
      return deferred.promise; 
     } 
    } 
}); 

Answer 1

我更喜歡這種編碼模式的服務。我創建並使用了一個Caching服務，以便我們可以從任何工廠端點調用URL並仍然獲取它。

隨意根據需要更改緩存時間。並請參閱有關搜索的員工ID

services.js

angular.module('directory.services', []) 
    .factory('CacheSetter', ['$cacheFactory', function ($cacheFactory) { 
     // create a cache factory to be used with $http requests 
     var factory = {}; 
     factory.getCached = function (url) { 
      var cache = $cacheFactory.get('$http'); 
      var urlCache = cache.get(url); 
      if(urlCache){ 
       var now = new Date().getTime(); 
       if(urlCache[2]){ 
        if(urlCache[2].date){ 
         var cacheDate = new Date(urlCache[2].date).getTime(); 
         if(now - cacheDate > 60 * 60 * 1000){ // 1 hour (change this as needed) 
          cache.remove(url); 
         } 
        } 
       } 
      } 
      return true; 
     } 
     return factory; 
    }]) 
    .factory('EmployeeService', ['$http', '$q', function ($http, $q) { 
     var path = 'http://localhost/youtubewebservice/shop-categorylist-product.php'; 
     var factory = {}; 
     factory.findAll = function(){ 
      return $http.get(path, { cache: CacheSetter.getCached(path) }).then(function (employees) { 
       return employees; 
      }, function(reject){ 
       // your request was rejected (timeout, failed, etc.) 
      }); 
     } 
     factory.findById = function(employeeId){ 
      factory.findAll().then(function(employees){ 
       // i would suggest actually doing a loop to confirm employee id rather than this 
       // method as it relies on employee ids always being sequential and being returned in order 
       var employee = employees[employeeId - 1]; 
       return employee; 
      }); 
     } 
     factory.findByName = function(searchKey){ 
      factory.findAll().then(function(employees){ 
       var results = employees.filter(function(element) { 
        var fullName = element.firstName + " " + element.lastName; 
        return fullName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1; 
       }); 
       return results; 
      }); 
     } 
     factory.findByManager = function(managerId){ 
      factory.findAll().then(function(employees){ 
       var results = employees.filter(function (element) { 
        return parseInt(managerId) === element.managerId; 
       }); 
       return results; 
      }); 
     } 
     return factory; 
    }]) 

，那麼你會調用該服務在您的控制器這樣

controller.js我的筆記

angular.module('directory.controllers', []) 
    .controller('categoryController', ['$scope', 'EmployeeService', 
     function($scope, EmployeeService){ 
      $scope.employees = []; 
      EmployeeService.findAll().then(function(employees){ 
       $scope.employees = employees; 
      }); 
     } 
    ]); 

Answer 2

試試這個

.factory('EmployeeService', function($q) { 

    var get = function(){return $http.get('http://localhost/youtubewebservice/shop-categorylist-product.php')} 

    return { 
     findAll: function() { 
      return get(); 
     }, 

     findById: function(employeeId) { 
      return get().then(function(employees){ 
       var employee = employees[employeeId - 1]; 
       return employee; 
      }); 

     }, 

     findByName: function(searchKey) { 
      return get().then(function(employees){ 

       var results = employees.filter(function(element) { 
        var fullName = element.firstName + " " + element.lastName; 
        return fullName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1; 
       }); 

       return results; 
     }, 

     findByManager: function (managerId) { 
      return get().then(function(employees){ 
       results = employees.filter(function (element) { 
        return parseInt(managerId) === element.managerId; 
       }); 
       return results; 
      }); 
     } 
    } 
}); 

您使用的承諾不正確。您不需要在這些情況下設置自己的承諾，因爲您可以鏈接作爲$http.get