Getting object from JSON response ($http) and passing it as variable on ng-click with AngularJS

Question

I'm trying to get a particular object from a JSON response that comes from a query to an API. From the response, I'm trying to get the ID from the result that gets clicked, and to pass it into the url of two other http queries.

Could you point me to the right direction in order to accomplish that?

Here's my current services.js:

angular.module('myApp', ['ngResource'])

function Ctrl($scope, $http) {
var get_results = function(name) {
  if (name) {
    $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=30').
      success(function(data3) {
        $scope.results = data3.results;
      });
  }
}
$scope.name = '';
$scope.$watch('name', get_results, true);



$http.get('http://api.discogs.com/artists/3823').
  success(function(data) {
      $scope.artist = data;
  });
$http.get('http://api.discogs.com/artists/3823/releases?page=1&per_page=200').
  success(function(data2) {
      $scope.releases = data2.releases;
  });
};

The directives.js:

angular.module('myApp', ['ngResource'])

.directive('artistData', function() {

  return{
      restrict: 'E',
      template: '<div class="col-md-12"> \
                 <h1>Artist</h1>  \
                  {{artist.name}} \
                 <h1>Real name</h1> \
                  {{artist.realname}} \
                 <h1>Profile</h1> \
                  {{artist.profile}} \
                 <h1>Releases</h1> \
                  <ul><li ng-repeat="release in releases | filter:{ role: \'main\' }"> {{release.title}} ({{release.year}})</li></ul> \
                 <h1>Remixes</h1> \
                  <ul><li ng-repeat="release in releases | filter:{ role: \'remix\' }"> {{release.title}}</li></ul> \
                 </div>',
      replace: true
  };
 })  

And the a piece of the JSON response from where I need to take the ID:

1: {thumb:http://api.discogs.com/images/default-artist.png, title:Alva (2),…}
 id: 796507
 resource_url: "http://api.discogs.com/artists/796507"
 thumb: "http://api.discogs.com/images/default-artist.png"
 title: "Alva (2)"
 type: "artist"
 uri: "/artist/Alva+%282%29"

And finally, the relevant HTML:

<ul>
    <li ng-repeat="result in results" ng-click="">{{result.title}}</li>
</ul>

I've created also a working Plunker. Basically, right now the search is working perfectly, but the directive is getting filled with a defined ID (3823) in the query url. What I need to do, is once results are displayed and a result is clicked on, to grab the ID of this particular result and pass it into the other two urls.

So instead of:

$http.get('http://api.discogs.com/artists/3823').

I'd have

$http.get('http://api.discogs.com/artists/'+artistid).

Answer 1

Define a new method in controller which will get data based on provided id:

$scope.getDetails = function (id) {
      $http.get('http://api.discogs.com/artists/' + id).
        success(function(data) {
            $scope.artist = data;
        });
      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=200').
        success(function(data2) {
            $scope.releases = data2.releases;
        });
}

And then pass upper function to ng-click directive:

<li ng-repeat="result in results" ng-click="getDetails(result.id)">{{result.title}}</li>

There is working version on Plunker.