使用角将本地Web服务器的JSON数据输出到Ionic应用程序
挑战性
我正试图通过角JS将以下JSON输出到我的Ionic Framework初学者侧菜单应用程序中，目前我从控制台日志中得到的唯一响应如下：
0 825606 log ApiEndpoint, [object Object]
1 825809 log Got some data: , [object Object]
1 825883 log Got some data: , [object Object]不幸的是，由于这个原因，我无法在products.html中显示我的产品列表
使用本地node.js数据库从我的Web服务器输出JSON
我的webserver输出可在http://localhost:8080/api/products上使用。
[
{
_id: "55be0d021259c5a6dc955289",
name: "Apple",
price: 2.5
},
{
_id: "55be0d541259c5a6dc95528a",
name: "Oranges",
price: 1.5
},
{
_id: "55be0d6c1259c5a6dc95528b",
name: "Pear",
price: 3
},
{
_id: "55be0d6c1259c5a6dc95528c",
name: "Orange",
price: 3
}
]services.js
angular.module('starter.services', [])
.factory('Api', function($http, ApiEndpoint) {
console.log('ApiEndpoint', ApiEndpoint)
var getApiData = function() {
return $http.get(ApiEndpoint.url + '/products')
.then(function(products) {
console.log('Got some data: ', products);
return products;
});
};
return {
getApiData: getApiData
};
})controllers.js相关码
.controller('ProductsCtrl', function($scope,Api) {
$scope.products = null;
Api.getApiData()
.then(function(result) {
$scope.products = result.products;
})ionic.project
{
"name": "grocerApp",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}显示输出的products.html
<ion-view view-title="The Grocer Shop">
<ion-content>
<ion-list>
<ion-item ng-repeat="product in products">
<a class="item item-thumbnail-left" href="#/app/products/{{product.id}}">
<img src="http://loremflickr.com/30/30/apples">
<h2>{{product.name}}</h2>
<p>EUR {{product.price}} per kilogram</p>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>app.js相关码
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
.constant('ApiEndpoint', {
url: 'http://localhost:8080/api'
})不幸的是，以下链接并没有帮助我：
Ionic/Angular App not reading json data from api
Getting data from a json file in IONIC using AngularJS
我还双重检查了文件路径，并在本地浏览器窗口中很好地加载了JSON [我正在使用具有CORS扩展启用的Chrome - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en ]。
问题
如何将本地get服务器上的JSON数据输入到products.html文件中？
回答 1
Stack Overflow用户
发布于 2015-08-20 20:13:00
您的服务和控制器有点错误，请尝试以下操作
services.js
angular.module('starter.services', [])
.factory('Api', function($http, ApiEndpoint) {
console.log('ApiEndpoint', ApiEndpoint);
var getApiData = function() {
return $http.get(ApiEndpoint.url + '/products');
};
return {
getApiData: getApiData
};
})controllers.js
.controller('ProductsCtrl', function($scope,Api) {
$scope.products = null;
Api.getApiData().then(function(result) {
$scope.products = result.data;
});编辑:进一步解释
所以你的第一个问题是返回一个承诺，并试图在多个地方解决它。
return $http.get(ApiEndpoint.url + '/products')
.then(function(products) {
console.log('Got some data: ', products);
return products;
});
Api.getApiData()
.then(function(result) {
$scope.products = result.products;
})最佳实践是，您的服务返回承诺，$http已经这样做了。然后，您应该处理如何在控制器中解决这个承诺，因此，基本上，我所做的只是将.then从工厂中删除。
下一个错误是试图在函数内部调用result.products。承诺是如何解决的，就是在带有数据属性的json对象中嵌套整个身体。因此，在这种情况下，您的响应看起来是{'data'：array_of_fruit}。如果您的响应是返回{‘products’：Arrayof果树}，那么您仍然必须像result.data.products那样访问。
希望这能有所帮助。
https://stackoverflow.com/questions/32127415
复制相似问题
腾讯云开发者
