0

I'm introducing in Angular with its Tutorial "Phonecat". Against the tutorial I'd like to build a simple app with a list and detail view with only one json, containing all informations.

The list-view (showing complete content of the json) works fine but I'm struggle with how to set my Angular services for the detail-view. I am using the XHR method:

Controller.js:

function PlaygroundDetailCtrl($scope, Playground) {
  $scope.playgrounds = Playground.query();
}

Services.js

angular.module('playgroundcatServices', ['ngResource']).
    factory('Playground', function($resource){
  return $resource('playgrounds/playgrounds.json', {}, {
    query: {method:'GET', isArray:true}
  });
});

playground.json

 [ 
   { 
     "id:" 1,
     "properties": "true"
     "lat": "51.347789"
     "lon": "12.232234"
   },
   {
     "id:" 2,
     "properties": "false"
     "lat": "51.347789"
     "lon": "12.766667"
   }
]

I want Angular to display only one entry (id:1) with its properties. What is the smartest way to do that: showing again all and then filter?

I am stumped.

1
  • Ideally, a RESTful resource would allow you to select one item by an identifier, and you shouldn't have to filter it on the client.
    – Ben Lesh
    Commented Feb 15, 2013 at 22:20

3 Answers 3

2

Use an Angular filter on your view (there's no need to filter the data on the service):

<div ng-repeat="entry in playgrounds | filter:{id: 1}">
    <p>properties: {{entry.properties}}</p>
    <p>lat: {{entry.lat}}</p>
    <p>lon: {{entry.lon}}</p>
</div>

jsfiddle: http://jsfiddle.net/bmleite/Ad6u9/

1
  • And if you want to filter your view on a $routeParams parameter, add this to your controller: $scope.myParam = $routeParams.parameterNameFromRouteController; and then in your view, modify the filter to be: <div ng-repeat="entry in playgrounds | filter:{id: myParam}"> <p>properties: {{entry.properties}}</p> <p>lat: {{entry.lat}}</p> <p>lon: {{entry.lon}}</p> </div>
    – Matty J
    Commented Feb 27, 2013 at 3:31
1

This worked out quite good:

Controller:

function PlaygroundDetailCtrl($scope, $routeParams, $http) {
    $http.get('playgrounds/playgrounds.json').success(function(data){
        angular.forEach(data, function(item) {
          if (item.id == $routeParams.playgroundId) 
            $scope.playground = item;
        });
    });
0

I've got exactly the same scenario now I think (I'm guessing you're developing with 'mobile' in mind (as I am and want to minimise data transfer) - I'm using one 'master json file', and then on my detail view just filtering that json file (so that the json doesn't have to be reloaded) on the ID value.

This is totally untested but your code from the original question should be modified something like this:

angular.module('playgroundcatServices', ['ngResource'])
.factory('Playground', function($resource){
    return $resource('playgrounds/playgrounds.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

function PlaygroundDetailCtrl($scope, Playground) {
  Playground.query(
    // params (none in this case)
    {},
    // Success
    function (data) {
        $scope.playgrounds = data.filter(function (o) {
            return o.id == $routeParams.playgroundId; // assuming you've set this up in your routes definition
        })[0];
    },
    // Error
    function (data) {
        //error handling goes here
    }
  );
}

You may want to put something like $scope.isDataLoaded = true; in your 'success' handler as well, and do a watch on that, to use to check to see when the data has finished loading (eg. for in a directive).

I'm not super happy with the [0] in there, but it think the solution is better than a forEach loop myself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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