AngularJS: Сервис не возвращает данные

Question

Я пытаюсь получить данные из json-файла через службу в AngularJS (1.5.3). Я не могу извлечь данные из json и отобразить их в представлении. Вместо этого я получаю пустые значения. Ниже приведен код:

//Service 
 

 
angularStoreApp.factory('dataService', ['$http', function ($http, $q) { 
 

 
    return { 
 
     getProducts: function() { 
 
      var promise = $http.get('/api/json/products.json')   
 
     .then(function successCallback(response) { 
 
      if (typeof response.data === 'object') { 
 
       return response.data; 
 
      } else { 
 
       // invalid response 
 
       return "Invalid data"; 
 
      } 
 
     }, function errorCallback(response) { 
 
      return "Invalid data"; 
 
     }) 
 
      return promise; 
 
     } 
 
    }; 
 
}]); 
 

 
//Controller 
 

 
/// <reference path="SearchController.js" /> 
 
angularStoreApp.controller('SearchCtrl', ['$scope', 'dataService', function ($scope, dataService) { 
 
     
 
    $scope.ProductItems = []; 
 
    
 
    dataService.getProducts() 
 
     .then(function (data) { 
 
      $scope.ProductItems = data; 
 
     }); 
 
}]);

<blockquote> 
 
    <h4 style="color: salmon">Welcome to the New Store 
 
    <br /> 
 
     Please select the products you want and add them to your shopping cart. 
 
    <br /> 
 
     When you are done, click the shopping cart icon to review your order and checkout. 
 
    <br /> 
 
    </h4> 
 

 

 
    
 
<div class="row"> 
 
    <div class="col-sm-12" ng-repeat="ProductItem in ProductItems track by $index"> 
 
     {{ProductItem.Name}}, {{ProductItem.Price}} 
 
    </div> 
 
</div>

Update:

Ниже данные JSON, что у меня есть. [{ "itemName": "Notepad", "itemPrice": 12, "itemQuantity": 0 }, { "itemName": "Pen", "itemPrice": 8, "itemQuantity": 0 }, { "itemName": "Pencil", "itemPrice": 5, "itemQuantity": 0 }];

Может ли кто-нибудь помочь мне.

Answer 1

Я думаю, что проблема в вашей первой строке!

вы должны пройти все услуги в виде строки:

angularStoreApp.factory('dataService', ['$http', '$q' function ($http, $q) { 

Answer 2

Для того, чтобы получить фрагмент кода работает, вам нужно

• инициализировать модуль в ЯШ: var angularStoreApp = angular.module('storeapp', []);
• надстройку ng-app на вид
• добавить ng-controller на вид (или использовать маршрутизацию)

Забыть добавить $q к зависимостям действительно является ошибкой, но это не мешает вашему приложению работать, если вы не используете $q.

Ниже приведен отрегулированный фрагмент рабочего кода. Я смоделировал http-вызов, вернув json, завернутый в обещание. Если он все еще не работает, проблема заключается в вызове HTTP, то есть в части, которую я прокомментировал. Выполните вызов в браузере и убедитесь, что вернут правильный JSON.

var angularStoreApp = angular.module('storeapp', []); 
 

 
//Service 
 

 
angularStoreApp.factory('dataService', ['$http', '$q', 
 
    function($http, $q) { 
 

 
    return { 
 
     getProducts: function() { 
 
     //simulate promise with json: 
 
     return $q.when([{ 
 
      'Name': 'name 1', 
 
      'Price': 1.23 
 
     }, { 
 
      'Name': 'name 2', 
 
      'Price': 4.56 
 
     }]); 
 
     //var promise = $http.get('/api/json/products.json') 
 
     // .then(function successCallback(response) { 
 
     // if (typeof response.data === 'object') { 
 
     // return response.data; 
 
     // } else { 
 
     // invalid response 
 
     // return "Invalid data"; 
 
     // } 
 
     // }, function errorCallback(response) { 
 
     // return "Invalid data"; 
 
     // }) 
 
     // return promise; 
 
     } 
 
    }; 
 
    } 
 
]); 
 

 
//Controller 
 

 
/// <reference path="SearchController.js" /> 
 
angularStoreApp.controller('SearchCtrl', ['$scope', 'dataService', 
 
    function($scope, dataService) { 
 

 
    $scope.ProductItems = []; 
 

 
    dataService.getProducts() 
 
     .then(function(data) { 
 
     $scope.ProductItems = data; 
 
     }); 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="storeapp" ng-controller="SearchCtrl"> 
 
    <blockquote> 
 
    <h4 style="color: salmon">Welcome to the New Store 
 
    <br /> 
 
     Please select the products you want and add them to your shopping cart. 
 
    <br /> 
 
     When you are done, click the shopping cart icon to review your order and checkout. 
 
    <br /> 
 
    </h4> 
 

 

 

 
    <div class="row"> 
 
     <div class="col-sm-12" ng-repeat="ProductItem in ProductItems track by $index"> 
 
     {{ProductItem.Name}}, {{ProductItem.Price}} 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

Я реплицировать свой код в jsbin и он прекрасно работает через Я изменил код для краткости.

Возможно, проблема связана с нижеследующим кодом, поскольку он ищет продукты.json в корневой папке не в папке вашего проекта.

$http.get('/api/json/products.json')

Попробуйте с удалением '/' в URL.

$http.get('api/json/products.json')

Answer 4

1. у забыл '$ д' для минификация
2. и должны использовать УАК отложила = $ д.отложить(); // (Добавлю полный код)

3. пример jsfiddle

   angular.module('app', []) 
   .controller('ctrl', function(dataService, $scope) { 
   var vm = this; 
   $scope.ProductItems = []; 
   
   dataService.getProducts() 
       .then(function(data) { 
       $scope.ProductItems = data; 
       }); 
   }) 
   .factory('dataService', ['$http', '$q', function($http, $q) { 
   
   function getProducts() { 
       var deferred = $q.defer(); 
   
       $http.get('https://httpbin.org/get') 
       .then(function successCallback(response) { 
   
        if (typeof response.data === 'object') { 
        // let say we get list of Products 
        deferred.resolve([{ 
         id: 1, 
         name: 'Product1' 
        }, { 
         id: 2, 
         name: 'Product2' 
        }, { 
         id: 3, 
         name: 'Product3' 
        }]); 
        } else { 
        // invalid response 
        return "Invalid data"; 
        } 
       }, function errorCallback(response) { 
        return deferred.reject("Invalid data"); 
       }) 
   
       return deferred.promise; 
   } 
   
   return { 
       getProducts: getProducts 
   }; 
   }]); 
   

Answer 5

Я думаю, что одна из проблем, у вас есть уже упомянутые @Ahmad Mobaraki, а еще один находится в ваш dataService, the promise объект, который возвращает $http.get('/api/json/products.json') уже используется then() function, поэтому что вам нужно сделать, это создать новый promise и вернуть его.

Пример кода:

//service 
angularStoreApp.factory('dataService', ['$http', '$q', function ($http, $q) { 

    return { 
     getProducts: function() { 
      var defered = $q.defer(); 

      $http.get('/api/json/products.json')   
       .then(function successCallback(response) { 
        if (typeof response.data === 'object') { 
         defered.resolve(response.data); 

        } else { 
         // invalid response 
         defered.reject("Invalid data"); 
        } 
       }, function errorCallback(response) { 
       defered.reject("Invalid data"); 
      }); 
      return defered.promise; 
     } 
    }; 
}]); 

//Controller 
angularStoreApp.controller('SearchCtrl', ['$scope', 'dataService', function ($scope, dataService) { 

    $scope.ProductItems = []; 

    dataService.getProducts() 
     .then(function (data) { 
      $scope.ProductItems = data; 
     }); 
}]); 

надеюсь, что это может помочь вам :)

Answer 6

Я нашел ответ, прочитав следующие ссылки

http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/

http://bguiz.github.io/js-standards/angularjs/resolving-promises-for-a-controller/

Следующая как я изменил мой код, чтобы заставить его работать:

В разделе конфигурации маршрутизации я использовал свойство разрешить для этого маршрута

var angularStoreApp = angular.module('AngularStore', ['ngRoute']); 
angularStoreApp.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/products', { 
     templateUrl: '/Views/Store.html', 
     controller: 'SearchCtrl', 
     resolve: { 
      resolvedJSON: function (dataService) { 
       return dataService.getProducts(); 
      } 
     } 
    }) 
    .when('/product/:productName', { 
     templateUrl: '/Views/product.html', 
     controller: 'ProductCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/products' 
    }); 
}]); 

Теперь я ввел resolvedJSON в моем контроллере следующего

/// <reference path="SearchController.js" /> 
angularStoreApp.controller('SearchCtrl', ['$scope', 'resolvedJSON',   function ($scope, resolvedJSON) { 
$scope.ProductItems = []; 
$scope.ProductItems = resolvedJSON; 
}]); 

И мой код обслуживания следующим образом:

angularStoreApp.factory('dataService', ['$http', function ($http, $q) { 
    return { 
    getProducts: function() { 
     return $http.get('/api/json/products.json') 
      .then(function successCallback(response) { 
       return response.data; 
      }, function errorCallback(response) { 
       return "Invalid data"; 
      }) 
    } 
}; 

следующие данные my json

[{ 
 
    "itemName": "Notepad", 
 
    "itemPrice": 12, 
 
    "itemQuantity": 0 
 
}, 
 
{ 
 
    "itemName": "Pen", 
 
    "itemPrice": 8, 
 
    "itemQuantity": 0 
 
}, 
 
{ 
 
    "itemName": "Pencil", 
 
    "itemPrice": 5, 
 
    "itemQuantity": 0 
 
}]

Мое мнение (Store.html) что-то вроде этого:

<div class="row"> 
 
    <div class="col-sm-12" ng-repeat="ProductItem in ProductItems track by $index"> 
 
     {{ProductItem.itemName}}, {{ProductItem.itemPrice}} 
 
    </div> 
 
</div>

Надеется, что это помогает кто-то сталкивается с аналогичной проблемой, как у меня. Спасибо всем, кто вел меня к лучшему и простому ответу.