挑战

我试图通过输出角JS以下JSON进入我的离子框架入门侧面菜单应用，目前，我从我的控制台日志得到的唯一回应是：

I am trying to output the following JSON via Angular JS into my Ionic Framework Starter Side-Menu App and currently the only response that I get from my Console Log is the following:

0     825606   log      ApiEndpoint, [object Object]
1     825809   log      Got some data: , [object Object]
1     825883   log      Got some data: , [object Object]

不幸的是因为这个原因，我无法显示为products.html内我的产品列表

Unfortunately as a result of this, I'm unable to display my product list within products.html

从我的Web服务器JSON输出[Node.js的服务器的MongoDB数据库的本地]

JSON Output from my Web Server [node.js server with MongoDB database local]

我的web服务器的输出可在的http：//本地主机：8080 / API /产品

My webserver output is available at 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

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 [相关code]

controllers.js [Relevant code]

.controller('ProductsCtrl', function($scope,Api) {
  $scope.products = null;
  Api.getApiData()
  .then(function(result) {
    $scope.products = result.products;
  })

ionic.project

ionic.project

{
  "name": "grocerApp",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

将products.html [炫耀输出]

products.html [to show off the output]

<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 [相关code]

app.js [Relevant code]

angular.module('starter', ['ionic', 'starter.controllers','starter.services'])

.constant('ApiEndpoint', {
  url: 'http://localhost:8080/api'
})

不幸的是以下几个环节没有帮助我：

Unfortunately the following links did not help me out :

Ionic/Angular应用程序不读通过api JSON数据

Getting利用离子一个JSON文件数据AngularJS

我也双重检查的文件路径和JSON负载以及在我的本地的浏览器窗口[我使用Chrome启用CORS扩展 - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en ]

I also double checked the file path and the JSON loads well in my local browser window[I am using Chrome with CORS extension enabled - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en ]

问

我怎样才能让我的JSON数据从我的本地网络服务器到我为products.html文件？

How can I get my JSON Data from my local webserver into my products.html file?

推荐答案

您服务，控制器是一个有点不对劲尝试以下

your service and controller is a bit wrong try the following

services.js

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

controllers.js

.controller('ProductsCtrl', function($scope,Api) {
  $scope.products = null;

  Api.getApiData().then(function(result) {
          $scope.products = result.data;
  });

编辑：进一步解释

Further explanations

所以，你的第一个问题是返回一个承诺，并试图解决它在多个地方。

So your first problem was returning a promise and trying to resolve it in multiple places.

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已经做。然后，您应该处理的承诺是如何在控制器解决所以基本上我所做的只是从你的工厂中删除。于是。

Best practice is that your service returns the promise, which $http already does. You should then handle how that promise is resolved in the controller so basically what I did was just remove the .then from your factory.

你有下一个错误是试图调用 result.products 然后函数内。如何承诺解决被嵌套在整个身体与数据属性的JSON对象。因此，在这种情况下，你的反应是寻找像{'数据'：[array_of_fruit]}。如果你的反应是返回{'产品'：[array_of_fruit]}那么你就还是要访问诸如 result.data.products 。

The next error you had was trying to call result.products inside then function. How a promise resolves is nesting the entire body in a json object with the data attribute. So in this case your response is looking like {'data': [array_of_fruit]}. If your response were to return {'products':[array_of_fruit]} then you would still have to access like result.data.products.

希望这有助于。