Loop through JSON files using Next, Previous buttons

[Philip Madeley]

I have a portfolio site, www.philipmadeley.com, but I'm having a hard time putting in some navigation [Next / Previous ] workId at the base of each page:

http://philipmadeley.com/#/work/analytics (scroll to bottom to see Close X)

How would I cycle through each workId  using previous/next buttons?

I have setup a Plunker to show my setup: http://plnkr.co/edit/zU9bz73Iv4ya0MIAE3f5?p=preview

I think I need to use a factory, but not sure really.

Any help is most appreciated.

[Tobias Wolff]

Hi Philip,

in fact is that the setup in your Plunker has some quirks. First off, you are passing in the "id" of the "projects.json" file as the "workId" parameter into the "/work" resource. The ids are "test1", "test2", "test3". You then try to $http.get files with the name of "test1.json", "test2.json", "test3.json", but they do not exist in the Plunker (instead you have "title1.json", "title2.json" and "title3.json"). Then you define the "path" variable in the "nextWork()" and "previousWork()" functions as

var path = ('/work/' + $stateParams.workId + 1);

This is wrong in multiple ways. $stateParams.workId is a string, not an id, so doing a "+ 1" will concatenate "1" to whatever is stored in $stateParames.workId, e.g. "test1" becomes "test11". Even if the value $stateParams.workId would be an integer, it would still be first concatenated with '/work/' and then become a string again. You would need to do this:

var path = '/work/' + ($stateParams.workId + 1);

Furthermore, in the workTemplate.html you try to call the functions "nextWork()" and "previousWork()" through the href="" parameter, but you should be using "ng-click" instead.

I have forked your Plunker here which works, but is still laking some significant validation and error checking.

Tobias.

[Philip Madeley]

Hello Tobias,

Happy new year to you and thanks for checking out my problem.

I was able to solve this, using the following code (a little different from my Plunkr due to copying from my source files) :

app.controller('WorkCtrl', ['$scope', '$stateParams', '$http', '$location', function($scope, $stateParams, $http, $location) {

    if (!$stateParams.workId) {

        $location.path('/');

    }

    $http.get('projects/' + $stateParams.workId + '.json').success(function(data) {

        $scope.work = data;

        //$scope.pageClass = 'page-work'; // only use to add class for ui view

        //function for next previous

        var currentWorkIndex;

        var l = $scope.allWorks.length;

        for (var i = 0; i < l; i++) {

            if ($scope.allWorks[i].id === $stateParams.workId) {

                currentWorkIndex = i;

                break;

            }

        }

        var prevWorkIndex = (currentWorkIndex !== 0) ? (currentWorkIndex - 1) : (l - 1);

        var nextWorkIndex = (currentWorkIndex !== l - 1) ? (currentWorkIndex + 1) : (0);

        $scope.prevWork = $scope.allWorks[prevWorkIndex].id;

        $scope.nextWork = $scope.allWorks[nextWorkIndex].id;

    });

}]);

Then i add the buttons to the template:

    <a ui-sref="work({workId:prevWork})">Previous</a>

    <a href="/#/">Home</a>

    <a ui-sref="work({workId:nextWork})">Next</a>

I really appreciate your email and look forward to maybe helping the AngularJS community in some way when i get better at coding!

Cheers :) 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/PmoXXNf67wI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Philip Madeley (Tokyo)
----------------------------------------------
Design + Development
www.philipmadeley.com