Question

我正在使用ionic / AngularJS构建应用程序。为了测试网络服务电话我正在使用最好的购买服务。答复如下：

{
  "from": 1,
  "to": 10,
  "total": 4665,
  "currentPage": 1,
  "totalPages": 467,
  "queryTime": "0.009",
  "totalTime": "0.045",
  "partial": false,
  "canonicalUrl": "/v1/categories?format=json&apiKey=****",
  "categories": [
    {
      "id": "abcat0010000",
      "name": "Gift Ideas",
      "active": true,
      "path": [
        {
          "id": "cat00000",
          "name": "Best Buy"
        },
        {
          "id": "abcat0010000",
          "name": "Gift Ideas"
        }
      ],
      "subCategories": [
        {
          "id": "pcmcat140000050035",
          "name": "Capturing Photos & Videos"
        },
        {
          "id": "pcmcat140000050036",
          "name": "Listening to Digital Music"
        },
        {
          "id": "pcmcat140000050037",
          "name": "Computing Made Easy"
        },
        {
          "id": "pcmcat140000050039",
          "name": "Simple GPS Navigation"
        },
        {
          "id": "pcmcat140000050040",
          "name": "Playing Video Games"
        },
        {
          "id": "pcmcat140000050041",
          "name": "Watching HDTV"
        },
    .........

如何在设备上以列表的形式检索和显示此信息？我知道$ http服务请求，但是如何将其合并到离子列表中呢？

Answer 1

我们假设您要在列表中显示名称字段。

<强> app.js

var baseURL="*here your json request*";

var categoriesName=[];

$http.get('baseURL')
 .success(function(response){

   $scope.objectResponse = response.categories;
   console.log($scope.objectResponse);

   $scope.objectResponse.forEach(function(item) {
   categoriesName.push(item.name);
   console.log(categoriesName);
 })

 .error(function(response){
   console.log(response);
 });

<强> HTML

<ul class="list">
    <li class="item" ng-repeat="listname in categoriesName">
      {{listname}}
    </li>
</ul>

这是您如何在设备上检索和显示此信息的列表。

Answer 2

假设您已经编写了获取数据的逻辑，我已经写了JSBin来实现ion-list。

在ionic / angularJS中从Web服务获取和显示数据

2 个答案: