Question

I’m working with Google Maps API v3 and I have an array of markers (markersArray) that each contain an element named ‘id’. Via Ajax, I hit a db and return current ID values as an array (tokID) and call a ‘loadMarkers’ function.

In the ‘loadMarkers’ function I need to remove any array items that don’t match the ID values returned from the db. I’ve looked into .splice() and .filter() but can’t for the life of me get it working.

Sorry for no code sample. I’m really stumped and don’t really have anything to go off of.

Thx!
Mike

Answer 1

Roughly you can do something like this,

UPDATED WORKING CODE

var newIDs; // new IDs found from ajax

newIDs = [1,2]
markersArray = [{ID:1},{ID:8},{ID:2},{ID:4},{ID:6}]
var newMarkers = $.map(markersArray,function(obj,i){
   if(($.inArray(obj.ID,newIDs) == -1))
      return null;
   else
      return obj; 
});

console.log(newMarkers);
​

// now newMarkers holds the filtered markers Array

Modify the above code to suit your need.

$.map $.inArray

Check the Working Fiddle

Final Code to find out the Extra ID’s sent from server too is : Fiddle

var newIDs; // new IDs found from ajax

newIDs = [1,2,3,4,5];

markersArray = [{ID:1},{ID:8},{ID:2},{ID:4},{ID:6}];
console.log('Orig Array: ',markersArray);
console.log('From Server: ',newIDs);
var newMarkers = $.map(markersArray,function(obj,i){
    return $.inArray(obj.ID,newIDs) == -1? null: obj;
});

console.log('New Markers Objects: ',newMarkers);
var newMarkerIDs = $.map(markersArray,function(obj,i){
    return $.inArray(obj.ID,newIDs) == -1? null:obj.ID;
});
console.log('New Markers ID Array: ',newMarkerIDs);
var extraIDs = $.map(newIDs,function(val,i){
    return $.inArray(val,newMarkerIDs) == -1 ? val : null;
});

console.log('Extra IDs: ',extraIDs);
​