Question

我正在尝试从JSON文件加载数据并在我的移动应用中显示。但问题是我无法在member-detail.html上显示JSON数据，应该在哪里显示特定用户的数据。但是在member-index.html上，所有用户的整个列表在哪里，我可以正确获取json数据。

我有两个页面/模板：

member-index.html ：列出所有成员。链接到member-detail.html。 JSON数据在此处正确显示：
member-detail.html ：有关单个成员的详细信息。 JSON数据无法正确显示。在这个页面上，我实际上只尝试输出以下两个表达式：
```
    <h2>Name: {{member.firstname }} {{member.lastname}}</h2>
```

您可以在这里查看我的文件/data/members.json：

[            
        {
            "id": 1, 
            "lastname": "Doe", 
            "firstname": "John", 
        }
  ]

我正在使用有关文件services.js中的$ http.get函数的服务加载json数据。还有两种方法 - ＆gt; findAll for member-index.html（=工作正常）和findById - ＆gt;对于member-detail.html（工作不正常，访问json对象不起作用，请查看以下行：var member = members [memberId - 1]）：

angular.module('myApp.services', [])

.factory('MemberService', function($http, $q) {

var members = $http.get("data/members.json").success(function(result){
  return result.data;

});

return {
  findAll: function() {
    var deffered = $q.defer();
    deffered.resolve(members);
    return deffered.promise;
  },
  findById: function(memberId) {
    var deferred = $q.defer();
    //members[memberId - 1] --> THIS IS NOT WORKING
    var member = members[memberId - 1];
    deferred.resolve(member);
    return deferred.promise;
  },
}

});

以下控制器用于member-detail.html：

.controller('MemberDetailCtrl', function($scope, $stateParams, MemberService) {
 MemberService.findById($stateParams.memberId).then(function (member) {
        $scope.member = member;
    });

我的debbuging工作的结果是，问题是在findById方法上访问services.js中的JSON-object。它是以下行：

var member = members [memberId - 1]; - ＆GT;它会返回一个不受欢迎的

但我不知道如何正确访问成员变量

Answer 1

您可以使用members

在forEach数组中通过ID找到合适的用户

var member = {};

angular.forEach(members, function (item) {
    if ( item.id == memberId ) {
        member =  item;
        return;
    }
});

deferred.resolve(member);

return deferred.promise;

Answer 2

使用以下代码，可以在member-detail.html中显示特定的成员数据：

<强> services.js

module.factory('MemberService', function($http, $q) {

  var members =  $http.get("data/members.json");

  return {
    getAll: function(){
        members = members.then(function(result){
        return result;
      })
      var deffered = $q.defer();
      deffered.resolve(members);
      return deffered.promise;
    },
  }
});

MemberService获取成员数据并在getAll方法中返回所有这些数据。

<强> controllers.js

MemberService.getAll().then(function(members){
        angular.forEach(members.data, function(item){
          if (item.id == $stateParams.memberId){
            $scope.member = item;
          }
        })
     });

对于每个成员对象，它将检查item.id是否与$ stateParams.memberId的值相同，如果它的真实成员数据将加载到$ scope.member中。

感谢@ artem-petrosian提供了很好的暗示。

angularjs - 无法在特定页面上显示json数据

2 个答案: