Angularjs - 读取内部 json 文件

Question

这是我第一次尝试使用 angularjs 和 ionic-framework。

我有一个示例 json 文件，我想在屏幕上显示其中的一些数据。 显示数据位有效，但我想用一些信息填充一个“详细信息”页面，这些信息存储在主 json 文件中，我需要使用 url 中的 id 来选择仅显示我需要的数据。

这里有一些代码：

App.js

angular.module('hgapp', ['ionic', 'hgapp.controllers', 'ngResource'])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'templates/menu.html',
            controller: 'AppCtrl'
        })
        .state('app.details', {
            url: '/details/:roomID',
            views: {
                'menuContent': {
                    templateUrl: 'templates/details.html',
                    controller: 'DetailsCtrl'
                }
            }
        })
    $urlRouterProvider.otherwise('/app/home');
});

Controllers.js

angular.module('hgapp.controllers', ['hgapp.services'])

.controller('AppCtrl', function ($scope, HGJson) {
    HGJson.get(function (data) {
        $scope.rooms = data.data;
    })
})

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) {
    $scope.roomID = $stateParams.roomID;
    console.log($stateParams.roomID);
})

services.js

angular.module('hgapp.services', ['ngResource'])
.factory('HGJson', function ($resource) {
    return $resource('json/data.json')
});

Data.json（只是一个简化的例子）

{
   tm: 00000000,
   errors: 0,
   data: {
       {id: 0, name: Value 0, url:url-0},
       {id: 1, name: Value 1, url:url-1},
       {id: 2, name: Value 2, url:url-2}
}

details.html

<ion-view view-title="Details">
<ion-content>
    <h1>{{roomID}}</h1>
</ion-content>

在详细信息页面中，我打印 roomID 只是为了查看控制器 (detailsCtrl) 是否工作，并且每次都打印正确的 id。现在，我遇到的问题是如何处理来自 HGJson 服务的数据，以便我可以打印来自正确房间 ID 的数据。

我希望这个问题足够清楚，如果没有，请随时要求更多澄清。

非常感谢

编辑

最后我解决了这个问题，将它添加到我的 controller.js 文件中：

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) {
    HGJson.get(function (data) {
        angular.forEach(data.data, function (item) {
            if (item.id == $stateParams.roomID)
                $scope.currentRoom = item;
        });
    });
})

Answer 1

只需执行与您在应用控制器中所做的相同的操作，但在返回的 JSON 中找到您想要的房间：

HGJson.get(function (data) {
    $scope.room = data.data.filter(function(room) {
      return room.id == $stateParams.roomID);
    })[0];
});

您还可以将过滤功能放在您的服务中，以便将来当您拥有真正的动态后端时，您可以调用不同的 URL 仅返回请求的房间，而不是调用返回所有房间的 URL。

angular.module('hgapp.services')
.factory('HGJson', function ($http) {
    return {
      getRooms: function() {
        return $http.get('json/data.json').then(function(response) {
          return response.data;
        });
      },
      getRoom: function(roomId) {
        return $http.get('json/data.json').then(function(response) {
          return response.data.data.filter(function(room) {
            return room.id == roomID;
          })[0];
        });
      }
    };
});

请注意，您的 JSON 无效：数据必须是数组，而不是对象。

Answer 2

在您的控制器中，您需要创建一个函数来“查找”数据对象中的正确对象。

试试这样的：

$scope.getRoom = function(id) {
  for(var i in $scope.rooms) {
    if($scope.rooms[i].id === id) {
      return $scope.rooms[i];
    }
  }
};

你可以在你的 DOM 中显示它：

{{ getRoom(roomID) }}

但是将当前房间设置为范围变量可能会更好，而不是每次都运行该函数。所以在这种情况下（我强烈推荐），你可以设置angular.copy($scope.rooms[i], $scope.currentRoom)（这会将房间复制到currentRoom范围变量中）而不是返回$scope.rooms[i]，然后在DOM 只需 {{ currentRoom }}

祝你好运！