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

因此，我设法让我的脚本通过$ http.get获取一些JSON数据，并在对象窗体中获取我的JSON数据。但是，我不能使用数组中的值。无法显示在HTML上收到的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>

Eventhough IVE检索JSON数据，即时通讯无法进行检索。我猜它与我有关，不能称呼它是正确的？提前致谢。

UPDATE：所述的console.log（$ scope.data）返回

“0 925121日志[对象的对象]”

伊夫试图在response.data运行JSON.stringify ，我现在得到一个不同的控制台。日志结果和一个新的错误。

的的console.log返回的JSON信息作为

{ “数据”：[{ “ID”：1， “年龄”： “24”， “用户名”： “hidir”}，{ “身份证”：2，“年龄”：“51”，“用户名”：“ibrahim”}]}

而错误是下面这表明我有重复的值，在数组中看起来不像它确实如此。：

"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

“

来源

2016-04-26 dirkaka

您可以提供console.log（$ scope.data）的输出，您可以在浏览器控制台中获得该输出。 –

是的，就像Deepesh一样，我怀疑数据不是你所期望的那样。 – 2ps

在代码，为什么你将用户名的值绑定到数组数据？ – Sarathy

你为什么不使用成功后的功能$ HTTP调用像下面

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

来源

2016-04-26 04:59:42 Murali

这不是一个答案。她已经获得了json数据。请再次检查问题。 – Atula

尝试使用JSON.stringify（response.data）;

来源

2016-04-26 05:03:41 Meesam

这是一个有趣的选项。我更新了我的问题，并从中得到了一个错误。 – dirkaka

你能试试吗？

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

来源

2016-04-26 05:33:34 Abhinav

添加了$ scope。$ apply（）; ，即时获取另一个错误“$摘要已在进行中”，不再获取JSON数据。 – dirkaka

你可以检查更新的解决方案吗？ – Abhinav

嘿Abhi，新的不再给出错误，但它没有改变任何东西。 – dirkaka

使用这个

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

来源

2016-04-26 06:24:07

由于JSON数据已经是一个对象，所以没有工作。所以这给了相同的consolelog结果。 – dirkaka

尝试更新代码 –

嗨Devidas，这给了我2个JSON数据，但是我仍然面临同样的问题。第二个包括状态，标题等。 – dirkaka

感谢@Abhinav的代码，我发现问题出在我的JSON格式。我希望有人可以在这里更好地解释它，因为我不够详细解释。

*首先JSON格式，没有工作

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

对于上面的代码，如果我{{userdata[0].username}}叫它它只会工作。使用这种格式的ng-repeat将失败。

阵表（离子的工作）

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

ng-repeat与第二格式效果很好。

来源

2016-04-26 07:22:10 dirkaka

实际上早些时候你从api获取一个对象。那个反对意见是有一些用户细节。所以，如果你需要使用这些项目，那么“数据”对象有数组，所以我想或者你可以使用'$ scope.data = response.data.data [0]'或者第二个数组是确定的。还有一件事是，如果你使用$ http.get（）。success（function（response）{}），那么你将直接获得由api发送的数据，例如$ scope.data = response。但是如果你使用$ http.get（）。then（function（response）{}），那么你将使用'data'属性获得相同的数据，即$ scope.data = response.data。 – Abhinav

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

回答

相关问题