How do you search and return a specific index of a JSON resource in AngularJS?

Question

I have a json file of events setup like this:

{
  2: {
    sched_conf_id: "38",
    title: "Coffee Break",
  },
  3: {
    sched_conf_id: "39",
    title: "registration",
  },
}

I setup and angular factory like this:

.factory('eventFactory', ['$resource',
    function($resource) {
        return {
            query: function(event_id) {
                return $resource('/assets/events.json', {}, {
                    query: { method: 'GET', params: {id:event_id}, isArray: false }
                }).query();
            }
        }
    }
])

and lastly I have my angular controller which calls the query method from the factory with the id being the id from the url:

.controller('eventCtrl', function($scope, $routeParams, eventFactory) {
     var eventId = $routeParams.event_id;
     $scope.eventData = eventFactory.query(eventId);
})

The return data seems to be just the entire events.json file rather than just the specific id I want to query for in the parameters. In the params I am trying id but that is obviously not correct. Using this setup how can I return just the data from event_id: 2?

score 1 · Answer 1 · answered Oct 24 '14 at 17:09

Assuming your production scheme is going to be fetching just a static file that doesn't do anything with arguments passed in, you need to extract the record you need after it's returned from the server.

Basically, you're requesting something like http://yourhost.com/assets/events.json?event_id=3 and if it's just a static file, the server can't do anything with that parameter. In practice, I would think you'd actually be requesting a response from a web service that can handle that, in which case your client-side code would probably work as-is.

In this specific case, however, I would think that you could handle this with an interceptor. Something like this:

.factory('eventFactory', ['$resource',
    function($resource) {
        return {
            query: function(event_id) {
                return $resource('/assets/events.json', {}, {
                    query: { method: 'GET', isArray: false,
                               interceptor: {response: 
                                   function(data){ var  d = JSON.parse(data);
                                       return d[event_id];
                                   } 
                               }
                           }
                });
            }
        }
    }
])

I don't have an environment set up to test this at the moment, but I think it should work. I have a couple places in my own code where I do something similar, for other reasons.

I see what you are going for then with this solution. Since this json file is a static asset, the factory has to first return then entire json file as the resource then parse the data from there. As is however this code did not work, I am looking into why that is now. It appears its not even getting to the interceptor code since I added a console.log("hi") in there and didn't get anything. — tbondt, Oct 24 '14 at 17:38

How do you search and return a specific index of a JSON resource in AngularJS?

1 Answers1