I make a get request which returns an array of objects. I want loop through the array and return one single object to the view based on the name property of that object. I have tried to use ng-repeat
with a filter
it just returns the all of the objects.
Is there away which I can filter the data to return 1 object from the array, with out using a search box. I want this to happen as the page is loading up.
HTML
<div ng-repeat="lecturer in lecturers | filter:name: courses.lecturer">
<h3>{{lecturer.name}}</h3>
<div>
<img class="img-circle" ng-src="{{lecturer.picture}}" alt="" />
</div>
<p>{{lecturer.description}}</p>
</div>
Controller
$scope.lecturers;
$scope.courses;
$scope.status;
var id = $stateParams.id;
//getCourse() method calls the coursesFac factory/service which calls the api endpoint and returns
//the course information based on the course id.
$scope.getCourse = function(id){
coursesFac.getCourseById(id)
.then(function (response) {
// var items;
response.data.video = JSON.parse(response.data.video);
console.log(response.data.video);
items = response.data.video;
$scope.courses = response.data;
// console.log(items);
// console.log($scope.courses.video);
}, function (error) {
$scope.status = 'Unable to load course data: ' + error.message;
console.log($scope.status);
});
};
//passes the state paramater in to the method. The paramater is the course Id
$scope.getCourse(id);
$scope.getLecturer = function(){
lecturerFac.getLecturer()
.then(function (response) {
$scope.lecturers = response.data;
console.log("inside the function getLectuers" +$scope.lecturers);
}, function (error) {
$scope.status = 'Unable to load lecturer data: ' + error.message;
console.log($scope.status);
});
};
$scope.getLecturer();
lecturerFac.getLecturerByName([name])
returns an array of lecturers and you just want one? You should simply be able to just do this::$scope.lecturer = reponse.data[0]
. That'll give you the first lecturer returned by your factory function. They're already filtered by name from the server (I'm assuming, based on the name of the function) so you wont be able to filter them further client-side anyways, unless you use a different filter (which it doesn't seem like).| filter: {name: courses.lecturer}
instead.ng-repeat
in the first place.