Extract one array item from a JSON according to the URL using AngularJS

Question

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!

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
– Brian Vanderbusch, Commented Feb 20, 2014 at 5:09
I'm asking because I'm a beginner at Angular and honestly don't know where to start. — David
– David, Commented Feb 20, 2014 at 5:15

Anthony Chu · Accepted Answer · 2014-02-20 05:09:24Z

1

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];
  });

});

answered Feb 20, 2014 at 5:09

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

5 Comments

Brian Vanderbusch Over a year ago

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

Anthony Chu Over a year ago

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

David Over a year ago

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.

Brian Vanderbusch Over a year ago

yeah, you're right. My bad. you need to return with it or pass it params in order to trigger a route change.

David Over a year ago

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.

Collectives™ on Stack Overflow

Extract one array item from a JSON according to the URL using AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related