Analyzing and modifying object property from $http on the fly with AngularJS

Question

I have two $http queries linked together. The first gets an artist name from a 3rd party API, and then with AngularJS I fill the query URL from the second $http query, that will get cover art from another 3rd party API.

The problem i'm finding, is that when searching for an artist name starting with "THE" (for instance The Smiths), the first API will respond with "Smiths, The", which won't be recognized by the second API as artist name.

Being so, is there some way to act uppon the case that the artist name received ends with ", the", and changing it back before parsing it into the second $http query?

Here's the relevant code:

$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=12').
    success(function(data2) {
        $scope.releases = data2.releases;
    });
  $scope.clicked = true;
  $scope.sliding = true;
 }
}
function ImageCtrl($scope, $http) {
      $scope.image = 'img/record-default.png'; 
      $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + $scope.artist.name + '&album=' + $scope.release.title + '&format=json').
        success(function (data4) {
          $scope.image = data4.album.image[2]['#text'];
        }
      );
};

If instead you use [promises](http://docs.angularjs.org/api/ng/service/$q) and chain them, you should be able to alter the artist name if necessary before doing your second query. An example of promise chaining at http://stackoverflow.com/questions/18010796/return-interdependent-async-promises-in-routeprovider-resolve — miqh, Mar 19 '14 at 01:32
There's really no way of analyzing the string and modifying it before passing it onto the next url without changing the whole of the code structure? :S — Eric Mitjans, Mar 19 '14 at 12:40
You could try using `$scope.$watch` on `$scope.artist`, such that whenever it changes (i.e. via your HTTP request) you can do processing inside the watch callback to modify the artist name appropriately. I made an example of what I mean here - http://jsfiddle.net/QBz2R/ — miqh, Mar 20 '14 at 01:09
@miqid just fantastic. Would you please paste the comment as an answer so I can mark it up? — Eric Mitjans, Mar 20 '14 at 01:21

score 1 · Accepted Answer · answered Mar 20 '14 at 01:29

Copying my comment over to an answer since it appeared have helped.

My suggestion to the problem asked was to watch the data returned from a HTTP request, and then make appropriate adjustments to any data fields, where necessary, in the watch callback.

$scope.$watch(function() {
    return $scope.artist;
}, function() {
    var pos = $scope.artist.name.toLowerCase().indexOf(', the');
    if (pos != -1) {
        $scope.artist.name = 'The ' + $scope.artist.name.slice(0, pos);
    }
});

If you do find yourself using a lot of sequential, interdependent HTTP requests later on though, I do recommend using promise chaining instead. :-)

Analyzing and modifying object property from $http on the fly with AngularJS

1 Answers1