Currently, I am working on an AngularJS application where I am attempting to display data retrieved using the http get method from a RESTServer.
The GET request is sent from one view and upon success, it navigates to another view within AngularJS. Both views share the same controller and I have an object in my scope variable that I am trying to iterate through. Below is my controller:
controller.js
function searchCtrl($state, $scope, $http){
$scope.search;
$scope.responses = [];
$scope.submit = function(){
if($scope.text){
$http.get("../backend/index.php/user/searchResult?search=" + $scope.text)
.then(function successCallback(response) {
$scope.responses = angular.fromJson(response.data.data);
console.log(typeof($scope.responses));
$state.go('home.search');
});
}
};
console.log($scope.responses);
}
Now, let's take a look at the view from which I am sending the request:
view1.html
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<span minimaliza-sidebar></span>
<form role="search" class="navbar-form-custom" ng-submit="submit()" ng-controller="searchCtrl">
<div class="form-group">
<input type="text" placeholder="SEARCH" class="form-control" name="top-search" id="top-search" ng-model="text">
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<a ui-sref="login">
<i class="fa fa-sign-out"></i> Log Out
</a>
</li>
<li>
<a ng-click="$root.rightSidebar = !$root.rightSidebar">
<i class="fa fa-tasks"></i>
</a>
</li>
</ul>
</nav>
Next, here is the view receiving the data (view2.html):
view2.html
<div class="wrapper wrapper-content animated fadeInRight" ng-controller="searchCtrl">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<h2>
2,160 results found for: <span class="text-navy" ng-model="search">{{search}}</span>
</h2>
<small>Request time (0.23 seconds)</small>
</div>
</div>
<div class="ibox float-e-margins">
<div class="ibox-title">
<h3>Media</h3>
</div>
<div class="ibox-content">
<table id="search_result1" class="display table table-striped table-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>Title</th>
<th>Subtitle</th>
<th>ISBN</th>
<th>Reg. No.</th>
<th>Archive Location</th>
<th>Publishers</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="response in responses">
<td>{{response}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
If anyone could offer insight into why this issue is occurring, it would be greatly appreciated. This code represents only the portion relevant to the problem I am facing.