我正在使用Ionic框架开发一个简单的混合移动应用程序。当您搜索姓氏时,会发送GET请求以检索所有匹配的姓氏,然后显示其相应的ID。我在显示来自JSON对象的返回数据时遇到问题。
以下是html页面:
<ion-view view-title="Account" ng-controller="AccountCtrl">
<ion-content>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Search" ng-model="name">
</label>
<button class="button button-small" ng-click="searchUser(name)">
Go
</button>
</div>
</div>
<div>
<ul ng-repeat="user in $results">
<li>{{user.id}}</li>
</ul>
</div>
</ion-content>
接下来是js文件,它成功返回一个填充的JSON对象,其中包含我需要的所有内容。
angular.module('starter.controllers', [])
.controller('AccountCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.searchUser = function (name) {
$http.get('https://notrelevantforthis/searchLastName?=' + name).then(function (response) {
console.log(response.data)
//Assign JSON obj to results to repeat through and display data
$scope.results = response.data;
//To show the actual JSON object is returned
//var jsonStr = JSON.stringify($scope.results);
//document.body.innerHTML = jsonStr;
}, function (error) {
console.log(error)
});
};
}]);
现在重要的部分是JSON对象本身的结构。我认为这是我感到困惑的地方。结构如下:
{
"response": {
"totalFound": 275,
"start": 0,
"acc": [
{
"id": [
"1"
],
"first_name": [
"Joe"
],
"last_name": [
"Smith"
]
},
{
"id": [
"2"
],
"first_name": [
"John"
],
"last_name": [
"Doe"
]
}]}
}
我的问题是使用ng-repeat迭代JSON对象。由于某些原因,没有显示任何数据,但在查看控制台时,该对象肯定存在。任何帮助或指导我的错误都会非常感激,因为我是新手并且一直试图找到正确的方法。
修改 尝试使用离子框架提供的集合重复,但是出现了堆栈限制错误。
答案 0 :(得分:1)
当您将response.data
分配给$scope.results
时,您实际上是在为其分配HTTP的响应主体,这是您在问题中拥有的整个JSON对象。如果您希望通过这些帐户response.data.response.acc
,则需要实际指向ng-repeat
。
在您的模板中,它应该是ng-repeat="user in results"
,$
前面没有results
。
您的JSON对象将每个帐户的id
列为数组,我建议您只提供不带数组的文字值,否则在ng-repeat中您必须使用{{user.id[0]}}
实际打印值而不打印数组本身。
我在这里为您创建了一个示例:http://plnkr.co/edit/GYeF4FzVHl8Og5QTFcDx?p=preview