Having trouble creating a new array of objects in angular (loop inside of loop)

Question

What I am trying to do is compare the two arrays "similarBands" and "artistsArray". I want to take note of every match that occurs in the two arrays (that was my logic behind creating the counter). The end result that I am looking for is a new Array of objects (called newMatchingArray) all the matches of these two arrays, which will take a name property and a matches property (which indicates how many matches there were).

The function now correctly finds matches but doesn't increase the "counter" at every match, it stops at 2. I'm totally new to JS and AJAX so sorry for the obvious question/lacking of technical detail. Thanks!

  $scope.getBandsLikeThisBand = function(){
          $.ajax({
            async: false,
            type: 'Get',
            url: 'https://api.spotify.com/v1/artists/' + $scope.bandId + '/related-artists',
            success: function(data){
              console.log($scope.allTheArtists);
              $scope.similarBandsArray = data.artists;
              $scope.similarMathesArray = [];
              $scope.newMatchingArray = [];
                for(var i = 0; i < $scope.similarBandsArray.length; i ++){ //going through every related artist from the search
                  var counter = 0;
                  for (var x = 0; x < $scope.allTheArtists.length; x ++){ //going through every artist in the allTheArtistsArray
                    if($scope.similarBandsArray[i].name === $scope.allTheArtists[x].name){
                      counter ++;
                      if (counter > 0){
                        var toBeAddedToMutual = {
                          name: $scope.similarBandsArray[i],
                          count: counter
                        };
                      $scope.newMatchingArray.push(toBeAddedToMutual);
                      }
                    }
                    if($scope.soManyObjects && $scope.soManyObjects.amount > 0 ){
                        $scope.bigBoyArray.push($scope.soManyObjects.name + "and their count is" + ($scope.soManyObjects.amount + 1));
                      }
                  }
                }
                for(var j = 0; j < $scope.similarBandsArray.length; j ++){
                  $scope.allTheArtists.push($scope.similarBandsArray[j]);
                }
              }
            });
          };

Answer 1

When you find the first match, the counter becomes 1. And you create an object toBeAddedToMutual and insert it to an array. How can the count to be any other value?

Do you mean to move the second if-block out of the first if-block ?

var counter = 0;
for (var x = 0; x < $scope.allTheArtists.length; x ++){
  if ($scope.similarBandsArray[i].name === $scope.allTheArtists[x].name){
    counter ++;
  }
  if (counter > 0) {
    var toBeAddedToMutual = {
      name: $scope.similarBandsArray[i],
      count: counter
    };
    $scope.newMatchingArray.push(toBeAddedToMutual);
  }
....

And as @FernandoPinheiro suggests, you might shorten your code with the lambda expressions.

angular.forEach($scope.similarBandsArray, function(band) {
  var matches = $scope.allTheArtists.filter(function(artist) {
    return band.name === artist.name;
  });
  if (matches.length) {
    $scope.newMatchingArray.push({
      name: band, // maybe you mean band.name
      count: matches.length
    });
  }
  ....
});

Answer 2

Check out this library: https://lodash.com/

It has every function that you will possibly need for your algorithm, like difference between arrays, filters, etc.