如何使用角的$http.get从JSON文件获取特定数据

I have a JSON file which has a user list. I want to get only a specific user from the list, and display it on an index page using Angular. I've searched a lot, but can't get a good answer. The list has to be in a JSON file, not in a JS file.

我有一个JSON文件，它有一个用户列表。我只想从列表中获取一个特定的用户，并在索引页上使用角度显示它。我找了很多，但是找不到好的答案。列表必须在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
    });
}]);

The JSON file:

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"
}    
]}

4 个解决方案

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

#2

You don't tell on which creatirea you want to filter the user.

您不知道您想要在哪个creatirea上过滤用户。

warning! The success and error for $http are depreciated, use then instead!

警告!$http的成功和错误被贬低，然后使用!

Deprecation Notice

弃用的通知

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

$http legacy承诺方法成功和错误已被弃用。使用标准的then方法代替。如果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.
        }
    );

#3

you can use like this

你可以这样使用

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

#4

success and error methods are deprecated.

不赞成使用成功和错误方法。

You can use 'then' instead

你可以用“then”代替。

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

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

#2