Currently in the process of developing a basic hybrid mobile application using the Ionic framework. The main functionality involves sending a GET request to retrieve matching last names when searched for, and then displaying their corresponding ID's. However, encountering difficulties in correctly displaying the returned data from the JSON object.
Here is snippet of the HTML page:
<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>
And here is the JavaScript file that successfully retrieves a populated JSON object with all necessary information.
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)
});
};
}]);
The structure of the JSON object itself seems to be the crux of the issue. It follows this pattern:
{
"response": {
"totalFound": 275,
"start": 0,
"acc": [
{
"id": [
"1"
],
"first_name": [
"Joe"
],
"last_name": [
"Smith"
]
},
{
"id": [
"2"
],
"first_name": [
"John"
],
"last_name": [
"Doe"
]
}]}
}
Struggling with iterating through the JSON object using ng-repeat. Despite seeing the object in the console, none of the data is being displayed on the page. Any guidance or assistance in identifying where the mistake lies would be highly appreciated, especially since I am new to this and still trying to figure out the correct methods.
EDIT: Attempted using collection-repeat provided by the Ionic framework but encountered stack limit errors.