AngularJS expected information not displaying

Question

I am working on a mobile application that gets a list of jobs from the server (WEBAPI) and populates the proper fields. When the user clicks on the job name, the application goes to a details page, where the job information needs to show again.

I am having issues getting the information to show.

Here is the index:

.state('jobs',{
            abstract: true,
            url: '/jobs',
            templateUrl: 'modules/jobs/views/jobs.html',
            controller: ['$scope', '$state', '$stateParams', 'jobs', function($scope, $state, $stateParams, jobs) {

                jobs.getData()
                    .then(function(jobs) {
                        $scope.jobs = jobs;
                    });

            }]
        })
        // Jobs > List
        .state('jobs.list', {
            url: '',
            title: 'All Jobs',
            templateUrl: 'modules/jobs/views/jobs.list.html' 
        })
        // Jobs > Detail
        .state('jobs.detail', {
            url: '/{JobId:[0-9]{1,4}}',
            title: 'Job Details',
            views: {
                'details': {
                    templateUrl: 'modules/jobs/views/jobs.detail.html',
                    controller: ['$scope', '$state', '$stateParams', 'utils', function($scope, $state, $stateParams, utils) {
                        $scope.job = utils.findById($scope.jobs, $stateParams.JobId);

                        $scope.edit = function(){
                            $state.go('.edit', $stateParams);
                        };

                    }]
                }, 
                '': {
                    templateUrl: 'modules/jobs/views/jobs.materials.html',
                    controller: ['$scope', 'materials', '$stateParams', function($scope, materials, $stateParams) {

                        materials.getDataById($stateParams.JobId)
                            .then(function(materials) {
                                $scope.materials = materials;
                            });

                        $scope.subHeader = 'Bulk Sack Materials';

                    }]
                }
            }
        })

Here is the Service:

app.factory('jobs', ['$resource', '$q', '$http', 'localStorageService', function($resource, $q, $http, localStorageService) {
    localStorageService.set('SessionId', 'A00DB328-7F9C-4517-AD5D-8EAA16FBBC8F');

    var SessionId = localStorageService.get('SessionId');
    return {
        getData: function() {
            var deferred = $q.defer();
            $http.get(baseUrl + 'Job/GetJobs?SessionId=' + SessionId, {
                cache: true
            }).success(function(jobs) {
                deferred.resolve(jobs);
            });
            return deferred.promise;
        }

    };

}]);

app.factory('materials', ['$resource', '$q', '$http', 'localStorageService', function($resource, $q, $http, localStorageService) {

    var SessionId = localStorageService.get('SessionId');

    return {
        getDataById: function(id) {
            var deferred = $q.defer();
            $http.get(baseUrl + 'Material/GetMaterials/' + id + '?SessionId=' + SessionId, {
                cached: 'true'
            }).success(function(materials) {
                deferred.resolve(materials);
            });
            return deferred.promise;
        }
    };

}]);

And here is the utils service:

app.factory('utils', function() { 
    return {
        findById: function findById(a, id) {
            for (var i = 0; i < a.length; i++) {
                if(a[i].id === id) {
                    return a[i];
                }
            }
            return null;
        }
    };
});

Here is the HTML for the job.list:

<div class="list-group">
<a class="list-group-item" ng-repeat="job in jobs" ui-sref="jobs.detail({ JobId: job.JobId })"> 
<dl>
    <dt>{{job.Name}}</dt>
    <dd>{{job.Location}}</dd>
</dl>

Some insight on how to get this to work would be awesome. Thank You-

On the details page, I am looking for the Job information to show.. So If I click job name "Foo", Job Foo is on the details page. If I click Job "Bar" Bar show on the details page — Jon Nowak
– Jon Nowak, Commented Oct 23, 2015 at 20:37

Ron Brogan · Accepted Answer · 2015-10-23 19:10:16Z

1

If I have inferred your goal correctly, you're issue is on the following line:

$scope.job = utils.findById($scope.jobs, $stateParams.JobId);

$scope.jobs will not exist like you expect it to. The jobs object was created in the list view's controller's scope, not the details view's controller. You'll want to do something like you have in the '' controller

JobService.getJobById($stateParams.JobId).then(function(data) {
     $scope.job = data;
});

answered Oct 23, 2015 at 19:10

Ron Brogan

9011 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jon Nowak Over a year ago

I have removed the first line you said. and then added this to the details controller

Jon Nowak Over a year ago

jobs.getDataById($stateParams.JobId).then(function(jobs){ $scope.jobs = jobs; });

Ron Brogan Over a year ago

Sorry for the late reply, did you ever get it working? If not, can you make a plunkr or similar so I can help out?

Jon Nowak Over a year ago

That Would be GREAT! Thank You

Collectives™ on Stack Overflow

AngularJS expected information not displaying

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related