Question

CHALLENGE

我正在尝试通过Angular JS将以下JSON输出到我的Ionic Framework Starter Side-Menu App中，目前我从Console Log获得的唯一响应如下：

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

不幸的是，由于这个原因，我无法在products.html

中显示我的产品列表

我的Web服务器[带有MongoDB数据库本地的node.js服务器]的JSON输出

我的网络服务器输出位于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]

问题

如何从我的本地网络服务器获取我的JSON数据到我的products.html文件中？

Answer 1

您的服务和控制器有点不对，请尝试以下

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。 promise如何解析是将整个主体嵌套在具有data属性的json对象中。因此，在这种情况下，您的回复看起来像{＆＃39;数据＆＃39;：[array_of_fruit]}。如果您的回复是{＆＃39;产品＆＃39;：[array_of_fruit]}，那么您仍然必须访问result.data.products。

希望这有帮助。

使用Angular

1 个答案: