AngularJS compare two (scope) arrays and only POST the 'non-same' result (2018)

Question

I have two arrays that i like to compare on the ID, if the ID from one array does not exist in the other i will add it with the Http Post.

This is the build up:

$scope.Games = [{id:1,Name:"BatMan"},
                {id:2,Name:"SpiderMan"},
                {id:2,Name:"Hulk"}];

$scope.NewGames = [{id:1,Name:"BatMan"},
                   {id:2,Name:"SpiderMan"},
                   {id:3,Name:"Hulk"},
                   {id:4,Name:"DeadPool"},
                   {id:5,Name:"IronMan"}, ,
                   {id:6,Name:"DrStrange"}];

so i load all the Games and NewGames with a GET in the two $scopes Now i would like to compare the two on the id_game, so i was thinking of something like this but can't get it to work, the http section works find however without the indexOf, it will add all the games double in DB if they already existed and that is what i want to prevent.

angular.forEach($scope.NewGames, function (value, index) {

  if ($scope.Games.indexOf(value.id ) === -1) {

      console.log('New game to add' + value.Name)         

     $http({
       method: 'POST',
       url: 'http.....\addGame',
       data: value
     })
  }
})

Possible duplicate of [How to get the difference between two arrays in Javascript?](https://stackoverflow.com/questions/1187518/how-to-get-the-difference-between-two-arrays-in-javascript) — Pop-A-Stash, Jul 31 '18 at 18:08
the question is the same, but the approach is different in this case, first of all we are 9(!) years further down the line of programming so there should be more efficient ways. As in this case shown by @amrender singh — Ewald Bos, Aug 01 '18 at 15:32

amrender singh · Accepted Answer · 2018-08-01T04:27:59.660

2

Since $scope.Games is an array of Objects use findIndex() instead of indexOf().

The findIndex() method executes the function once for each element present in the array:

If it finds an array element where the function returns a true value, findIndex() returns the index of that array element (and does not check the remaining values). If no such element is found it returns -1. In the example given below:

o is each object/element of array games and we check for equality between the id(o.id) prop for each object of games array with the findId. If there is an element in the games array, where the id matches with the findId, the condition turns true and findIndex returns the index of that element/object.

var games = [{id:1,value:"abc"},{id:2,value:"dfg"},{id:2,value:"fdf"}];
var findId = 2;
// when object with id is present in array
if(games.findIndex((o)=>o.id == findId) > -1);
  console.log("Found");
findId= 6;
//when object with id is not present in array
if(games.findIndex((o)=>o.id == findId) == -1);
  console.log("Not found");

edited Aug 01 '18 at 04:27

answered Jul 31 '18 at 16:44

amrender singh

7,949
3
22
28

i kinda see where you are going but how would i use this with the if().... ? because there are two array's, the 0.id == 6 in your case also comes from an array, value – Ewald Bos Jul 31 '18 at 17:14
@EwaldBos I have updated my answer please have a look :-) – amrender singh Jul 31 '18 at 17:16
1

@EwaldBos in your case it will be simply equal to : if($scope.Games.findIndex((o)=>o.id_game ===value.id_game ) == -1 ) – amrender singh Jul 31 '18 at 17:19
nice! works perfect. Just a question, could you perhaps explain how this part works, ... (o) => o.id_game ... and perhaps add it to the answer then i could select is as the right one :) – Ewald Bos Jul 31 '18 at 18:01

AngularJS compare two (scope) arrays and only POST the 'non-same' result (2018)

1 Answers1