Take vaules from one JSON resoruce and using it to build another $resource with AngularJS

Question

Basically I have a SPA that is being served its content from a Rails site via JSON. Right now I have one factory that loads up a list of events with a format similar to this:

{
id: 35987,
class: "Event",
event_id: 35987,
name: "New Event",
preview: "Description of the event goes here!"
},
{
id: 35989,
class: "Event 2",
event_id: 35989,
name: "Event for Something else",
preview: "Description of the event goes here again!"
}

I then display the top 5 events on a view with a controller that takes the top 5 from the resource.

  .controller('UpcomingCtrl', function($scope, upcomingFactory, localUserFactory) {

    localUserFactory.get(function (user) {
        upcomingFactory.query({channelID: user.channel_id}, function(data){
           $scope.upcomingEvents = data;
        });
    });

  })

This is where the tricky part for me comes in. I want the user to be able to click on one of these 5 results and then be taken to a details page for the corresponding event. The information from this detailed event comes from a separate JSON file that is labeled by the event ID using this structure http://www.testsite.com/api/v1/{{event_id}}.json

So that means I need to somehow pass the event ID from the list of events to a resource and fill in the {{event_id}} for the events .json file based on the URL the person clicks. This means the routes also have to be dynamic so that any event on http://www.testsite.com/events can become http://www.testsite.com/events/id when you click on a link.

I hope this makes sense!

Answer 1

Register your resource with url mappers:

$resource('testsite.com/events/:id);

You can use that url mapping by providing an object to the resource get call:

myResource.get({id: oneId}).then(... 

Any other property from that object that is not defined in the resource url will go as a querystring parameter at the end of the request' url.

Edit:

I think I misunderstood your question. You can register your apps route with the same url mapping I described above. When the user clicks on an event, do:

$location.path(route + '/' + eventId);

On the detail controller, inject the $routeParams service and access your event's id as a property, for example :

$scope.eventId = $routeParams.id // or instead of id, the name of the url mapping you registered in your routes ('events/:nameOfVariable')