Question

我是一个新角色，试图学习它。我试图从我收到的网络服务中显示用户数据作为回应。这是回复

    {
    "Users": {
        "SearchTerm": "angularjs ra1",
        "ResultsPerPage": "20",
        "RecordStartNumber": "0",
        "TotalEstimatedResults": "6",
        "User": [{
            "WWID": "123456",
            "Email": "mary.p.wilson@yahoo.com",
            "BusinessTitle": "Project Manager",
            "Name": "Mary Wilson",
            "firstname": "Mary",
            "lastname": "Wilson",
            "idsid": "RAP"
        }, {
            "WWID": "1234567",
            "Email": "steve.r.smith@gmail.com",
            "BusinessTitle": "Quality Assurance",
            "Name": "Steve Smith",
            "firstname": "Steve",
            "lastname": "Smith",
            "idsid": "DRPRESTO"
        }, {
            "WWID": "12345678",
            "Email": "jon.jones@gmail.com",
            "BusinessTitle": "Chef",
            "Name": "Jon Jones",
            "firstname": "Jon",
            "lastname": "Jones",
            "idsid": "JJONES"
        }]
    }
}

MyScript.js

    var Application = angular.module('TestModule', []);
Application.controller('TestController', function ($scope,$http) {
    $scope.TestValue = "Hello World from Controller";
    $scope.Myfunc = function asdf() {
        $http.get('http://unifiedcollaborationprofile.gots.com/search/expert/data/v2/?apiKey=SECRET&listFromPersonNumber=0&numPeoplePerPage=20&query=angularjs+ra1&returnFriendlyResults=true').then(
            function (response) {
                $scope.users = [];
                angular.forEach(response.Users, function (value, key) {
                    $scope.users.push(value);
                });
            });
    };
});

page.html中

<!DOCTYPE html>
<html ng-app="TestModule">
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
{{2+3}}
<body>
    <div ng-controller="TestController">
        {{2+3}}
        {{TestValue}}
        <input type="text" ng-model="TestValue" />
        <input type="button" value="Click Me To Get All Users!!!!" ng-click="Myfunc()" />
        <ul ng-repeat="k in users">
            <li>WWID:{{k.WWID}}  Email:{{k.Email}}  Name:{{k.Name}}  IDSID:{{k.idsid}}</li>
        </ul>

    </div>
</body>
</html>
<script src="scripts/angular.min.js"></script>
<script src="scripts/MyScripts/MyScript.js"></script>

但是我的页面上没有任何内容呈现。我不确定我是否正确访问JSON用户集及其属性中的嵌套User对象。我错过了什么。

Answer 1

我已经使用您的代码创建了plunker，而我所做的就是将其更改为：

$scope.Myfunc = function asdf() {
    $http.get('test.json').then(function(response) {
      $scope.users = [];
      angular.forEach(response.data.Users.User, function(value, key) {
        $scope.users.push(value);
      });
    });
  };

http://plnkr.co/edit/Fu1tCnhxSn9dgBXtTJ9r?p=preview

您必须记住，在http promise被解析后，then会收到一个包含多个值的对象：状态代码，标题和包含您数据的data

Answer 2

我认为问题在这里

 $scope.users = [];
                angular.forEach(response.Users, function (value, key) {
                    $scope.users.push(value);
                });

尝试更改

$scope.users = response.data.Users

或者您可以更改为

 $scope.users = [];
                    angular.forEach(response.data.Users, function (value, key) {
                        $scope.users.push(value);
                    });

Answer 3

angular.forEach(response.Users.User, function (value, key) {
 $scope.users.push(value);
});

你的数组是嵌套的，所以你必须在对象中调用数组

访问嵌套的JSON对象及其属性Angularjs

3 个答案: