Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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).
share|improve this question

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
Fucking hell, that was simple. I'm starting to think that I'm trying to jump into AngularJS without a solid JS foundation, and then these things happen. Many thanks PrimosK! –  Eric Mitjans Mar 13 at 19:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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