如何使用Angular的$ http.get從JSON文件中獲取特定數據

Question

我有一個包含用戶列表的JSON文件。 我只想從列表中獲取特定用戶，並使用Angular將其顯示在索引頁面上。 我進行了很多搜索，但找不到很好的答案。 該列表必須在JSON文件中，而不是JS文件中。

sampleApp.controller('userInfo', ['$scope', '$http', '$log', '$filter',  function($scope, $http, $log,$filter) {
$scope.results = '';

$http.defaults.headers.common['X-Custom-Header'] = 'Angular.js';

$http.get('data/registered-user-list.json').
    success(function(data, status, headers, config) {
        $scope.results = data;
    })
    .error(function(data, status, headers, config) {
        // log error
    });
}]);

JSON文件：

{ "results": [
{
  "usernumber": "1",
  "userid": "manojsoni",
  "userpassword": "password",
  "useremail": "manojsoni.online@gmail.com",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
},
{
  "usernumber": "2",
  "userid": "jasmeet",
  "userpassword": "password",
  "useremail": "jasmeet@nagarro.com",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
},
{
  "usernumber": "3",
  "userid": "manoj30dec",
  "userpassword": "password",
  "useremail": "manoj.kumar@nagarro.com",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
},
{
  "usernumber": "4",
  "userid": "lavish",
  "userpassword": "password",
  "useremail": "lavish.sharma@nagarro.com",
  "timestamp": "1:30pm",
  "datestampe": "25/01/2016"
}    
]}

Answer 1

$http.get('data.json'). //json file path
        success(function(data, status, headers, config) {
            alert("Success");
           $scope.resutls = data;
        }).
        error(function(data, status, headers, config) {
            alert("Error");
          // log error
        });

我在這里回答的類似問題

Http獲取JSON文件數據並顯示

最后，遍歷結果並獲取所需的數據/用戶。

Answer 2

您不會告訴您要過濾哪個creatirea用戶。

---

警告！ $http的success和error已棄用，請改用then ！

棄用通知

$ http舊式的Promise方法成功和錯誤已被棄用。 請改用標准然后方法。 如果$ httpProvider.useLegacyPromiseExtensions設置為false，則這些方法將引發$ http / legacy錯誤。

// i will update this function when you provide more details
var getData = function(users){
  for(var i in users{
    if(users[i]["theFieldYouWant"] == theValueYouWant){
        return users[i];
    }   
  }
}

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.results = getData(response);
        },
        function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        }
    );

Answer 3

你可以這樣使用

$http.get('data.json').then(function(response) {
    console.log(response);
    $scope.results = response;
},
function(error) {
    $scope.results = [];
    console.log(error);
});

Answer 4

不建議使用成功和錯誤方法。

您可以使用“ then”代替

$http.get('data/registered-user-list.json').then(function(response) {
    if (response.status == 200) {
        $scope.results = data;
    } else {
        // log error
    }
});