0

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();
9
  • So if I understand this correctly, your function 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). Commented Mar 15, 2017 at 20:31
  • 1
    your filter isn't sane. try | filter: {name: courses.lecturer} instead. Commented Mar 15, 2017 at 20:33
  • 1
    See MDN JavaScript Reference - Accessing Array Elements. Commented Mar 15, 2017 at 20:35
  • @Claies The filter is also irrelevant. He just wants to present a single lecturer, so there's no need to use ng-repeat in the first place. Commented Mar 15, 2017 at 20:37
  • @ Claies that worked a treat. It is always the little things Commented Mar 15, 2017 at 20:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.