无法显示在 HTML 上收到的 JSON 数据

Question

所以我设法让我的脚本通过 $http.get 检索一些 JSON 数据，并以对象形式获取我的 JSON 数据。但是，我无法使用数组中的值。

这是我的 AppCtrl 部分 (AngularJS)

app.controller('AppCtrl', function($scope,$http) {


$scope.data = [];
$scope.submit = function() {

var link = 'http://www.mywebsite.com/api.asp';
$http.get(link).then(function(response) {
    $scope.data = response.data;
    console.log($scope.data);
});
};
});

这是 HTML 位

<form ng-submit="submit()">
      <input class="button button-block button-positive" type="submit" name="submit" value="Submit To Server">
    </form>
    <div class="card">
        <li ng-repeat="userdata in data">
          Username : {{userdata.username}}
          Age : {{userdata.age}}
        </li>
    </div>

即使我检索了 json 数据，我也无法检索它。我猜这与我没有正确称呼它有关吗？提前致谢。

更新：console.log($scope.data) 返回

"0 925121 日志 [object Object]"

我尝试在 response.data 上运行 JSON.stringify，我现在得到一个不同的 console.Log 结果和一个新错误。

console.log 将 JSON 信息返回为

{"data":[{"ID":1,"age":"24","username":"hidir"},{"ID":2,"age":"51","username ":"易卜拉欣"}]}

错误如下，表明我在数组中有重复的值，看起来不像。 ：

"Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: userdata in data, Duplicate key: string:a, Duplicate value: a
http://errors.angularjs.org/1.5.3/ngRepeat/dupes?p0=userdata%20in%20data&p1=string%3Aa&p2=a

"

Answer 1

你可以试试这个吗？

app.controller('AppCtrl', function($scope,$http) {
    $scope.name = null;
    $scope.submit = function() {
        var link = 'http://www.mywebsite.com/api.asp';
        $http.get(link).then(function(response) {
            $scope.data = response.data;
            if(!$scope.$$phase) {
                //$digest or $apply
                $scope.$apply();
            }
        });
    };
});

Answer 2

为什么不使用 $http 调用后的成功函数，如下所示

$http.get(link).success(function(response) {
    console.log(response);
});
}; 

Answer 3

尝试使用 JSON.stringify(response.data);

Answer 4

使用这个

$http({
  url : link,
  method : "GET",
  headers: {
      'Content-Type': 'applcation/json'
     }
}).then(function(response) {
    console.log(response);
    $scope.data = angular.fromJson(response.data);
    console.log($scope.data);
});

Answer 5

感谢@Abhinav 的代码，我发现问题出在我的 JSON 格式上。我希望有人可以在这里更好地解释它以供将来参考，因为我不够精通，无法详细解释。

*第一个无效的 JSON 格式

{"data":[{"ID":1,"age":"24","username":"hidir"},{"ID":2,"age":"51","username":"ibrahim"}]}

对于上面的代码，只有当我用{{userdata[0].username}} 调用它时它才会起作用。使用这种格式的ng-repeat 会失败。

数组形式（适用于 Ionic）

[{"ID":1,"age":"24","username":"hidir"},{"ID":2,"age":"51","username":"ibrahim"}]

ng-repeat 适用于第二种格式。