Angularjs-读取json文件内部

这是我第一次尝试使用angularjs和ionic框架

我有一个示例json文件，我想在屏幕上显示其中的一些数据。 显示数据位可以工作，但是我想用一些信息填充一个“详细信息”页面，这些信息存储在主json文件中的abject中，我需要使用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');
});

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);
})

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

Controllers.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');
});

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);
})

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

services.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');
});

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);
})

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

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

details.html

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

---

只需执行与在app controller中执行的操作相同的操作，但在返回的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无效：数据必须是数组，而不是对象。

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

试着这样做：

$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

scoped变量中），而不是返回

$scope.rooms[I]

，然后在DOM中使用它，只需

{currentRoom}

---

祝你好运

您是否尝试过

json

过滤器？在html:

{{roomID | json}}

添加json过滤器的结果是->“6”（对于roomID=6）。除此之外，它只添加了speachmarks，如果您尝试

{{{rooms | json}}

，就会出现这种情况。你看到data.json中的数据了吗？是的，有了{rooms | json}我可以看到所有房间的数据，而且不仅仅是我想要的房间（id:6）好的，我会添加一个答案，给我几分钟：）1）感谢关于json的建议，事实上，这只在这个问题上是错误的，但在我的开发机器上不是。2）你能提供一个在服务上添加过滤的例子吗？或者我能读到更多关于它的东西？谢谢，我不能使用你的代码，它会在控制台中产生大量错误，我不能再检索任何数据了，就像getRoom（roomId）中出现了问题一样，现在应该修复它。但你不应该用我的密码。在你理解之前是这样的。我假设getRoom函数需要进入detailsCtrl，对吗？但是，就像在我的建议中一样，我会在数据加载时找到房间，并将其设置为

currentRoom

，因此你不总是像你所说的那样计算getRoom。我尝试过，但我有一个空白页……没有返回任何内容（甚至添加json）按照您的建议尝试使用currentRoom作用域）抱歉，它应该在appCtrl中，因为那里是

$Scope.rooms

lives，但是它在我的模板中不可用，因为它由detailsCtrl控制，对吗？