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

我是一个新角色，试图学习它。我正在尝试显示作为响应收到的web服务中的用户数据。这里的响应访问嵌套的JSON对象及其属性Angularjs

{ 
    "Users": { 
     "SearchTerm": "angularjs ra1", 
     "ResultsPerPage": "20", 
     "RecordStartNumber": "0", 
     "TotalEstimatedResults": "6", 
     "User": [{ 
      "WWID": "123456", 
      "Email": "[email protected]", 
      "BusinessTitle": "Project Manager", 
      "Name": "Mary Wilson", 
      "firstname": "Mary", 
      "lastname": "Wilson", 
      "idsid": "RAP" 
     }, { 
      "WWID": "1234567", 
      "Email": "[email protected]", 
      "BusinessTitle": "Quality Assurance", 
      "Name": "Steve Smith", 
      "firstname": "Steve", 
      "lastname": "Smith", 
      "idsid": "DRPRESTO" 
     }, { 
      "WWID": "12345678", 
      "Email": "[email protected]", 
      "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及其属性的Users集合中的嵌套User对象。我错过了什么。

来源

2017-04-07 Programmerzzz

这是可能的，我读错了，但它看起来像你通过JSON，这ISN”的用户级试图循环实际上是一个数组。它看起来像用户属性有几个随机属性，然后另一个属性'用户'持有用户数组 –

我在用户代码'$ scope.users = [];''中声明用户数组。通过它不是一个数组？ – Programmerzzz

对不起，JSON数据的用户级别不是数组 - >你有''用户“：{...}' - 这个级别的数据不是数组。那有意义吗？ –

我认为问题是在这里

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

来源

2017-04-07 23:22:36 Akashii

这只是给出了与服务返回的用户数量相等的列表项，但是没有数据.. :( – Programmerzzz

@Programmerzzz在你的html中，尝试改为'k.user.WWID' – Akashii

否好运队友....现在它不是di展示任何东西......页面为空 – Programmerzzz

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

你的阵列是嵌套的，所以你必须调用对象

0123中的数组

来源

2017-04-07 23:23:45 TypedSource

没有....这是行不通的，我试过了这个... :( – Programmerzzz

肯定你的回应是你要显示的东西，它是json对象而不是json字符串？ – TypedSource

我认为它是一个JSON字符串，你的意思是我们需要解析它，然后我们使用forEach循环对其进行处理？ – Programmerzzz

我创建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

你必须记住，then http后面的承诺得到解决接收包含几个值对象：状态码，头和data将包含您的数据

来源

2017-04-07 23:40:53 maurycy

这是问题，FYI - 添加'.data' –

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

回答

相关问题