訪問嵌套的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

回答

相關問題