我的代码中有以下内容:
function store() {
this.products = [
new product("sku001", "Apple", "Tasty stuff", 1.00, "local"),
...
];
这适用于显示所有产品:
<h3>Products</h3>
<b>Display products: {{store.products}}</b>
<div class="row">
<div ng-repeat="product in store.products">
<img ng-src="@Url.Content("~/Content/images/products/{{product.sku}}.png")" alt="{{product.name}}"><p></p>
<p>{{product.description}}</p>
</div>
展示的产品:
现在我没有硬编码这些值,而是想从一个安静的api中加载它们:
function store($resource) {
var Resource = $resource('/api/products/');
this.products = Resource.query();
console.log(this.products)
这似乎也可行,但值的格式略有不同(大写/不同的键名):
[{"SKU":"sku001","Name":"Apple","ProductType":"local","Description":"Tasty stuff","Allowance":1073741824,"Price":1}]
我想使用从API收到的数据创建一个与我当前格式匹配的对象数组,但我遇到了一些问题:
function store($resource) {
var Resource = $resource('/api/products/');
this.products = Resource.query(function (data) {
var product = {};
var productsList = []
for (i = 0; i < data.length; i++) {
product = {
sku: data[i].SKU,
name: data[i].Name,
description: data[i].Description,
price: data[i].Price,
category: data[i].ProductType
}
productsList.push(product);
}
return productsList;
});
当我运行代码时,会输出:
如您所见,显示的json尚未修改,因此不会显示描述/价格。
有人知道如何修改使用$ resource加载的数据然后显示它吗?
修改
controller.js
function storeController($scope, $routeParams, DataService) {
// get store and cart from service
$scope.store = DataService.store;
$scope.cart = DataService.cart;
}
app.js
var storeApp = angular.module('AngularStore', ['ngRoute', 'ngResource']).
//route stuff
}]);
storeApp.factory("DataService", function ($resource) {
var myStore = new store($resource);
var myCart = new shoppingCart("AngularStore");
// return data object with store and cart
return {
store: myStore,
cart: myCart
};
});
答案 0 :(得分:1)
function store($resource) {
var Resource = $resource('/api/products/');
Resource.query(function (data) {
var product = {};
var productsList = []
for (i = 0; i < data.length; i++) {
product = {
sku: data[i].SKU,
name: data[i].Name,
description: data[i].Description,
price: data[i].Price,
category: data[i].ProductType
}
productsList.push(product);
}
$scope.products = productsList;
});
}
当您使用this.products = Resource.query(function (data) {...}
时,this.products
会收到Resource.query()
的返回值,而不是回调函数的返回值。
修改
使用$scope
,而不是this
。
答案 1 :(得分:1)
从Angular 1.2开始,资源支持承诺。但他们没有改变其余的行为。
要利用$ resource的promises,您需要在返回的值上使用$ promise属性。
function store($resource) {
var Resource = $resource('/api/products/');
Resource.query().$promise.then(
//success callback
function (data) {
var product = {};
var productsList = []
for (i = 0; i < data.length; i++) {
product = {
sku: data[i].SKU,
name: data[i].Name,
description: data[i].Description,
price: data[i].Price,
category: data[i].ProductType
}
productsList.push(product);
}
this.products = productsList;
},
//error call back
function(){
});
}
由于