代码之家 › 专栏 › 技术社区 › Nick

Angularjs-在json文件中读取

ionic-framework json angularjs

Nick · 技术社区 · 9 年前

这是我第一次尝试使用angularjs和离子框架。

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

下面是一些代码:

应用程序.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');
});

控制器.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);
})

服务.js

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

数据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>

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

我希望这个问题足够清楚,如果不清楚,请随时要求进一步澄清。

谢谢

编辑

最后,我解决了这个问题,将它添加到我的控制器中。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;
        });
    });
})

2 回复 | 直到 9 年前

JB Nizet 9 年前

只需在应用程序控制器中执行相同的操作,但在返回的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无效:数据必须是数组,而不是对象。

julian soro 9 年前

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

试试这样的方法:

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

您可以在DOM中显示它:

{{ getRoom(roomID) }}

但是将当前房间设置为范围变量而不是每次都运行该函数可能会更好。所以在这种情况下( 我强烈建议 ),而不是返回 $scope.rooms[i] ,您可以设置 angular.copy($scope.rooms[i], $scope.currentRoom) (这将把房间复制到 currentRoom 作用域变量),然后在DOM中使用它 {{ currentRoom }}

祝你好运