AngularJS - Get data by ID

Question

I got the following situation:
I got some custom marker an a static (non google) map. I display(and filter) the marker with this code:

<div ng-controller="DealerDetailsListCtrl">
    <a ng-click="showdetails=!showdetails" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.left}};top:{{marker.top}}" ng-repeat="marker in dealer|zipFilter:zipCodeLookup:countryLookup"></a>
</div>

I route it to the "dealer-details.html" where I successfully display the ID:

  <div class="alldealermodal" ng-controller="DealerDetailsCtrl">      
    <div ng-view></div>
  </div>

with this controller / routing:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/dealer/:id', {templateUrl: 'files/tpl/dealer-details.html', controller: DealerDetailsCtrl}).
      otherwise({redirectTo: '/'});
}]);

and

function DealerDetailsCtrl($scope, $routeParams) {
  $scope.id = $routeParams.id;
}

Since I'm very new to angularJS I would like to know, how could I get all the data by the ID.

My json file looks like this:

[
{
    "id": "2",

    "name": "Laden Dortmund",
    "strasse": "Unionstr.",
    "hausnr": 1,
    "plz": "45525",
    "stadt": "Dortmund",
    "land": "DE",
    "url": "http://www.google.de",
    "tel": "0234-234568",
    "email": "[email protected]",
    "left": "200px",
    "top": "300px",
    "lowRange":60000,
    "highRange":70000
},
{
    "id": "1",
    "name": "Laden Unna",
    "strasse": "Berlinerstr.",
    "hausnr": 134,
    "plz": "78654",
    "stadt": "Unna",
    "land": "AT",
    "url": "http://www.bing.de",
    "tel": "0234-11223344",
    "email": "[email protected]",
    "left": "250px",
    "top": "500px",
    "lowRange":40000,
    "highRange":50000
}
]

and so on.... and I would like to get all data from the chosen id. How can I do that? Would somebody give ma a hint?

I use this controller to get ALL the data from the json:

function DealerListCtrl($scope, $http) {
  $scope.dealer = [];
  $http.get('files/js/dealer.json').success(function(data) {
    $scope.dealerall = data;
  });
  $scope.orderProp = 'id';
}

Just iterate over the array in a function and return the object with the correct id? — Liviu T.
– Liviu T., Commented Jan 1, 2013 at 14:45

asgoth · Accepted Answer · 2013-01-01 15:00:20Z

5

First of all, you don't need to set ng-controller="DealerDetailsCtrl" in dealer-details.html, because ng-view will take care of that.

Secondly, you should provide a service to retrieve your data:

var app = angular.module('myApp', []);

app.factory('dealerService', function($http) {
   return {
      getDealerList function() {
         var dealers = {
            list : []
         };
         // TODO add possible caching via $cacheFactory
         $http.get('files/js/dealer.json').success(function(data) {
            dealers.list = data;
         });
         return dealers;
      },

      // other functions
   };

});

In your controllers, where you need to access your dealers, just inject DealerService, as you would another service. To fetch a particular entry, just iterate.

Another possibility is use the resolve property on $routeProvider to send the dealer data to the DetailController.

answered Jan 1, 2013 at 15:00

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

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

3 Comments

Marek123 Over a year ago

That doesn't work, am I doing something wrong? Getting the error: ncaught SyntaxError: Unexpected token function line 5

Marek123 Over a year ago

Got another problem (sorry, very new to angularjs)... is this correct? pastebin.com/gTHs0vNy - it gives me this error: ReferenceError: dealers is not defined

asgoth Over a year ago

You are referencing a function, not executing it.

Collectives™ on Stack Overflow

AngularJS - Get data by ID

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related