current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I hope my title wasn't too confusing. Basically what I have is a list of portfolio items whose data is gathered from a JSON file. Each portfolio item has a url that will navigate to the single portfolio item.

Here is a sample of the JSON:

[
{
     "url": "nutcracker",
    "name": "Nutcracker Main Street Ballet",
     "snippet": "Trifold Playbill",
     "imgurl": "img/nutcracker.jpg",
     "keyword": "trifold brochure folder over foldover folded"},

MORE
]

And here is the controller that is gathering the data:

myApp.controller('ListCtrl', function ($scope, $http) {
  $http.get('items/items.json').success(function(data){
    $scope.pages = data; 
  });

});

And here, the routing:

config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/list', {templateUrl: 'partials/list.html', controller: 'ListCtrl'});
  $routeProvider.when('/:pageUrl', {templateUrl: 'partials/single-item.html', controller: 'ItemCtrl'});
  $routeProvider.otherwise({redirectTo: '/list'});
}]);

Now each portfolio item uses the 'url' datum to dictate the url. So this item would provide a url of: www.mysite.com/#/nutcracker.

What I want to do is search the URL for 'nutcracker' and then find that corresponding item in the JSON array and use it's data to populate the single portfolio page.

I hope this isn't too confusing. Please ask questions if you think you can help but may not be sure as to what I'm looking for!

Thank you very much!

share|improve this question
    
there are a few different techniques that could be used to approach this need. Have you tried anything yet and run into a problem, or are you just asking for the best approach? –  Brian Vanderbusch Feb 20 at 5:09
    
I'm asking because I'm a beginner at Angular and honestly don't know where to start. –  David Feb 20 at 5:15
add comment

1 Answer 1

up vote 1 down vote

Use $location.path() to access the path, strip off the leading "/", then use the path to search the array (example uses $.grep() to do this because question was tagged jQuery)...

myApp.controller('ListCtrl', function ($scope, $http, $location) {
  $http.get('items/items.json').success(function(data){
    $scope.pages = data; 

    var path = $location.path();  // "/nutcracker"
    if (path.length) {
      path = path.substring(1); // "nutcracker"
    }
    // find matching page in pages
    $scope.page = $.grep(pages, function (page) { return page.url === path; })[0];
  });

});
share|improve this answer
    
i'm thinking if you take this approach, $location will cause the app to re-route, which will cause a redirect loop. +1 for use of $grep –  Brian Vanderbusch Feb 20 at 5:11
    
Does calling $location.path() trigger a route change? I thought it just returns the current route. At least that's what the docs seem to suggest? docs.angularjs.org/api/ng/service/$location –  Anthony Chu Feb 20 at 5:17
    
Ok Anthony, let me try this method in the morning... It is getting late here. I will update you if this helps me. From looking at it, it looks like it might be in the right direction. –  David Feb 20 at 5:22
    
yeah, you're right. My bad. you need to return with it or pass it params in order to trigger a route change. –  Brian Vanderbusch Feb 20 at 5:49
    
Sorry for taking so long to respond. This didn't seem to work for what I was doing. When the url changes example.com/#/nutcracker it doesn't extract just the object with the corresponding url and so it doesn't extract any data. –  David Feb 21 at 15:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.