Removing an object from an array if it does not exist in another array: A step-by-step

Question

Removing an object from an array if it does not exist in another array: A step-by-step

Looking to remove an object from an array if it's not present in another array. After doing some research, I came across a similar question on this link, but with a different array source.

Below is the example from the link:

var check = [1, 2, 3];
var allowed = [1];

var filtered = check.filter(function(item) {
  return allowed.indexOf(item) > -1;
});

console.log(filtered);

The example above removes numbers from the array check if they are not present in the array allowed. In my case, the source array contains objects as shown below:

var check = [
    {
        name: 'Peter',
        location: 'florida'
    },
    {
        name: 'Robert',
        location: 'California'
    }
];

var allowed = [
    {
        name: 'Robert',
        location: 'Boston'
    }
];

var filtered = check.filter(function(item) {
  return allowed.indexOf(item.name) > -1;
});

console.log(filtered);

I ran the code and ended up with an empty array as the result.

Expected result:

[
    {
        name: 'Robert',
        location: 'California'
    }
]

If anyone could help me achieve the expected result, that would be greatly appreciated.

javascript arrays

Answer 1

Answer №1

To utilize the Array#find() function

var list = [{
    name: 'Alice',
    location: 'New York'
  },
  {
    name: 'Bob',
    location: 'Texas'
  }
];

var allowedItems = [{
  name: 'Bob',
  location: 'Texas'
}];

var result = list.filter(function(item) {
  return allowedItems.find(function(allowedItem) {
    return item.name === allowedItem.name
  })
})

console.log(result)

Answer 2

To utilize the Array#find() function

var list = [{
    name: 'Alice',
    location: 'New York'
  },
  {
    name: 'Bob',
    location: 'Texas'
  }
];

var allowedItems = [{
  name: 'Bob',
  location: 'Texas'
}];

var result = list.filter(function(item) {
  return allowedItems.find(function(allowedItem) {
    return item.name === allowedItem.name
  })
})

console.log(result)

Answer 3

Answer №2

To simplify the search criteria, you can map the allowed variable to only include the names you are interested in:

var allowed = [{
    name: 'Robert',
    location: 'Boston'
}]
.map(obj => obj.name);

This will result in an array containing just the names, making it easier to test using indexOf

For example:

var check = [{
    name: 'Peter',
    location: 'florida'
  },
  {
    name: 'Robert',
    location: 'California'
  }
];

var allowed = [{
  name: 'Robert',
  location: 'Boston'
}]
.map(obj => obj.name);

var filtered = check.filter(function(item) {
  return allowed.indexOf(item.name) > -1;
});

console.log(filtered);

Answer 4

To simplify the search criteria, you can map the allowed variable to only include the names you are interested in:

var allowed = [{
    name: 'Robert',
    location: 'Boston'
}]
.map(obj => obj.name);

This will result in an array containing just the names, making it easier to test using indexOf

For example:

var check = [{
    name: 'Peter',
    location: 'florida'
  },
  {
    name: 'Robert',
    location: 'California'
  }
];

var allowed = [{
  name: 'Robert',
  location: 'Boston'
}]
.map(obj => obj.name);

var filtered = check.filter(function(item) {
  return allowed.indexOf(item.name) > -1;
});

console.log(filtered);

Answer 5

Answer №3

To successfully validate against the item names in the specified allowed array, you need to ensure that your comparison is accurate. Currently, you are comparing the items in the allowed array, which are of type object.

Here's where the issue lies:

return allowed.indexOf(item.name) > -1;

Consider this alternative approach:

var check = [
    {
        name: 'Peter',
        location: 'Florida'
    },
    {
        name: 'Robert',
        location: 'California'
    }
];

var allowed = [
    {
        name: 'Robert',
        location: 'Boston'
    }
];

function containsName(name, array){
  return array.find(item => item.name === name);
}

var filtered = check.filter(function(item) {
  return containsName(item.name, allowed)
});

console.log(filtered);

Answer 6

To successfully validate against the item names in the specified allowed array, you need to ensure that your comparison is accurate. Currently, you are comparing the items in the allowed array, which are of type object.

Here's where the issue lies:

return allowed.indexOf(item.name) > -1;

Consider this alternative approach:

var check = [
    {
        name: 'Peter',
        location: 'Florida'
    },
    {
        name: 'Robert',
        location: 'California'
    }
];

var allowed = [
    {
        name: 'Robert',
        location: 'Boston'
    }
];

function containsName(name, array){
  return array.find(item => item.name === name);
}

var filtered = check.filter(function(item) {
  return containsName(item.name, allowed)
});

console.log(filtered);

Answer 7

Answer №4

Utilizing the intersect function below, you can find the intersection of keys within any array of objects:

var data = [
    { name:'Alice', location:'New York' },
    { name:'Bob', location:'California'}
];

var criteria = [
    { name:'Bob', location:'Boston' }
];

function getIntersection(data, criteria) {
    var criteriaMap = criteria.reduce(function(map, obj) {
        Object.keys(obj).forEach(function(key) {
            if (!map[key]) {
                map[key] = [];
            }
            map[key].push(obj[key]);
        });
        return map;
    }, {});


    return data.filter(function(item) {
        return Object.keys(item).find(function(key) {
            return criteriaMap[key].indexOf(item[key]) != -1;
        })
    });
}

var result = getIntersection(data, criteria);

var newCriteria = [{ name:'Charlie', location:'Miami' }];
var newResult = getIntersection(data, newCriteria);

console.log('result:', result);
console.log('newResult:', newResult);

Answer 8

Utilizing the intersect function below, you can find the intersection of keys within any array of objects:

var data = [
    { name:'Alice', location:'New York' },
    { name:'Bob', location:'California'}
];

var criteria = [
    { name:'Bob', location:'Boston' }
];

function getIntersection(data, criteria) {
    var criteriaMap = criteria.reduce(function(map, obj) {
        Object.keys(obj).forEach(function(key) {
            if (!map[key]) {
                map[key] = [];
            }
            map[key].push(obj[key]);
        });
        return map;
    }, {});


    return data.filter(function(item) {
        return Object.keys(item).find(function(key) {
            return criteriaMap[key].indexOf(item[key]) != -1;
        })
    });
}

var result = getIntersection(data, criteria);

var newCriteria = [{ name:'Charlie', location:'Miami' }];
var newResult = getIntersection(data, newCriteria);

console.log('result:', result);
console.log('newResult:', newResult);

Answer 9

Answer №5

There are various methods based on your specific requirements.

Dirty Check
Specific Attribute Check
Nested Object Check

Dirty Check

To perform a dirty check where both arrays have the same memory reference for objects, you can follow this approach:

var firstPerson = {
    name: 'Peter',
    location: 'florida'
}
var secondPerson = {
    name: 'Robert',
    location: 'California'
}

var allowed = [secondPerson];
var check = [firstPerson, secondPerson];

var result = check.filter(item => allowed.includes(item));

console.log(result);

Specific Attribute Check

If you need to check for a specific attribute, you can utilize the find method to compare attributes like name or location between the check and allowed arrays.

var check = [
    {
        name: 'Peter',
        location: 'florida'
    },
    {
        name: 'Robert',
        location: 'California'
    }
];

var allowed = [
    {
        name: 'Robert',
        location: 'Boston'
    }
];


var result = check.filter(checkPerson => allowed.find(allowPerson => allowPerson.name === checkPerson.name));

console.log(result);

Nested Object Check

For checking nested objects, a recursive approach is required. You can use a utility function like deepCompare, which acts as a lightweight alternative to Lodash's isEqual.

var check = [
    {
        name: 'Peter',
        location: {
            street: "fridtjof nansens vei 8511",
            city: "ågotnes",
            state: "buskerud",
            postcode: "8766",
            coordinates: {
                latitude: "50.4828",
                longitude: "-84.6920"
            }
        }
    },
    {
        name: 'Robert',
        location: {
            street: "schillerstraße 69",
            city: "velburg",
            state: "saarland",
            postcode: 72100,
            coordinates: {
                latitude: "30.4655",
                longitude: "9.1938"
            }
        }
    }
];

var allowed = [
    {
        name: 'Robert',
        location: {
            street: "schillerstraße 69",
            city: "velburg",
            state: "saarland",
            postcode: 72100,
            coordinates: {
                latitude: "30.4655",
                longitude: "9.1938"
            }
        }
    }
];


var result = check.filter(checkPerson => allowed.some(allowPerson => deepCompare(checkPerson, allowPerson)));

console.log(result);

<script>
/**
 * Deep Compare
 * @param { * } value first entry value
 * @param { * } other second entry value
 * @param { Boolean } sorted Sort any array before deep comparison
 */
const deepCompare = (value, other, sorted) => {
  if (Object.is(value, other)) return true;

  if (!value || !other || value.constructor !== other.constructor) return false;

  switch (value.constructor) {
    case Array:
      if (value.length === other.length) { return deepArrayCompare(value, other, sorted); }
      return false;
    case Object:
      if (Object.keys(value).length === Object.keys(other).length) { return deepObjectCompare(value, other, sorted); }
      return false;
  }
  return false;
};

const deepObjectCompare = (value, other) => deepArrayCompare(Object.keys(value), Object.keys(other), true) && Object.keys(value).every(key => deepCompare(value[key], other[key]));

const deepArrayCompare = (value, other, sorted) => (sorted && value.sort(), sorted && other.sort(), value.every((item, index) => deepCompare(item, other[index])));
</script>

Answer 10

There are various methods based on your specific requirements.

Dirty Check
Specific Attribute Check
Nested Object Check

Dirty Check

To perform a dirty check where both arrays have the same memory reference for objects, you can follow this approach:

var firstPerson = {
    name: 'Peter',
    location: 'florida'
}
var secondPerson = {
    name: 'Robert',
    location: 'California'
}

var allowed = [secondPerson];
var check = [firstPerson, secondPerson];

var result = check.filter(item => allowed.includes(item));

console.log(result);

Specific Attribute Check

If you need to check for a specific attribute, you can utilize the find method to compare attributes like name or location between the check and allowed arrays.

var check = [
    {
        name: 'Peter',
        location: 'florida'
    },
    {
        name: 'Robert',
        location: 'California'
    }
];

var allowed = [
    {
        name: 'Robert',
        location: 'Boston'
    }
];


var result = check.filter(checkPerson => allowed.find(allowPerson => allowPerson.name === checkPerson.name));

console.log(result);

Nested Object Check

For checking nested objects, a recursive approach is required. You can use a utility function like deepCompare, which acts as a lightweight alternative to Lodash's isEqual.

var check = [
    {
        name: 'Peter',
        location: {
            street: "fridtjof nansens vei 8511",
            city: "ågotnes",
            state: "buskerud",
            postcode: "8766",
            coordinates: {
                latitude: "50.4828",
                longitude: "-84.6920"
            }
        }
    },
    {
        name: 'Robert',
        location: {
            street: "schillerstraße 69",
            city: "velburg",
            state: "saarland",
            postcode: 72100,
            coordinates: {
                latitude: "30.4655",
                longitude: "9.1938"
            }
        }
    }
];

var allowed = [
    {
        name: 'Robert',
        location: {
            street: "schillerstraße 69",
            city: "velburg",
            state: "saarland",
            postcode: 72100,
            coordinates: {
                latitude: "30.4655",
                longitude: "9.1938"
            }
        }
    }
];


var result = check.filter(checkPerson => allowed.some(allowPerson => deepCompare(checkPerson, allowPerson)));

console.log(result);

<script>
/**
 * Deep Compare
 * @param { * } value first entry value
 * @param { * } other second entry value
 * @param { Boolean } sorted Sort any array before deep comparison
 */
const deepCompare = (value, other, sorted) => {
  if (Object.is(value, other)) return true;

  if (!value || !other || value.constructor !== other.constructor) return false;

  switch (value.constructor) {
    case Array:
      if (value.length === other.length) { return deepArrayCompare(value, other, sorted); }
      return false;
    case Object:
      if (Object.keys(value).length === Object.keys(other).length) { return deepObjectCompare(value, other, sorted); }
      return false;
  }
  return false;
};

const deepObjectCompare = (value, other) => deepArrayCompare(Object.keys(value), Object.keys(other), true) && Object.keys(value).every(key => deepCompare(value[key], other[key]));

const deepArrayCompare = (value, other, sorted) => (sorted && value.sort(), sorted && other.sort(), value.every((item, index) => deepCompare(item, other[index])));
</script>

Removing an object from an array if it does not exist in another array: A step-by-step

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Dirty Check

Specific Attribute Check

Nested Object Check

Similar questions

Pass the ID of the <a> element from one function to another

Utilizing the jQuery slideToggle method on the specified target element

Navigating File Paths in Node.js

Installation of a cloned Parse server

Tricks for preventing axios from caching in GET requests

What is the best tool for syntax highlighting with Vue.js?

What are the best practices for implementing jquery owlCarousel within an Angular 4 component?

Getting an out-of-range exception (System.ArgumentOutOfRangeException) in C# Razor pages while attempting an AJAX call

Issue with IE7 Dropdownlist not appearing after changing class name when onFocus event is triggered for the first time

Would you say the time complexity of this function is O(N) or O(N^2)?

Tips for obtaining the entire date and time on one continuous line without any breaks or separation

Utilizing HTML and jQuery to load a dynamic URL within a div placeholder

The integration of the jQuery library within the server side of a Google Apps Container Bound Script

JavaScript function following AJAX request

Ensuring jQuery filter() works seamlessly with Internet Explorer versions 6, 7, and 8

encountering a type mismatch error while trying to retrieve data from an array

Safari seems to have trouble running Javascript, unlike all the other browsers which handle it just fine

The system encountered an error stating that the required component "Footer" in the main directory was not located in the specified node_modules

Tips for accessing nested JSON values using Selenium

What is the process for accessing extra scope information with next-auth?