javascript filter array of objects

JavascriptJqueryArrays

Javascript Problem Overview


I have an array of objects and I'm wondering the best way to search it. Given the below example how can I search for name = "Joe" and age < 30? Is there anything jQuery can help with or do I have to brute force this search myself?

var names = new Array();

var object = { name : "Joe", age:20, email: "[email protected]"};
names.push(object);

object = { name : "Mike", age:50, email: "[email protected]"};
names.push(object);

object = { name : "Joe", age:45, email: "[email protected]"};
names.push(object);


Javascript Solutions


Solution 1 - Javascript

A modern solution with Array.prototype.filter():

const found_names = names.filter(v => v.name === "Joe" && v.age < 30);

Or if you still use jQuery, you may use jQuery.grep():

var found_names = $.grep(names, function(v) {
    return v.name === "Joe" && v.age < 30;
});

Solution 2 - Javascript

You can do this very easily with the [].filter method:

var filterednames = names.filter(function(obj) {
    return (obj.name === "Joe") && (obj.age < 30);
});

You can learn more about it on this MDN page.

Solution 3 - Javascript

You could utilize jQuery.filter() function to return elements from a subset of the matching elements.

var names = [
    { name : "Joe", age:20, email: "[email protected]"},
    { name : "Mike", age:50, email: "[email protected]"},
    { name : "Joe", age:45, email: "[email protected]"}
   ];
   
   
var filteredNames = $(names).filter(function( idx ) {
    return names[idx].name === "Joe" && names[idx].age < 30;
}); 

$(filteredNames).each(function(){
     $('#output').append(this.name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"/>

Solution 4 - Javascript

var nameList = [
{name:'x', age:20, email:'[email protected]'},
{name:'y', age:60, email:'[email protected]'},
{name:'Joe', age:22, email:'[email protected]'},
{name:'Abc', age:40, email:'[email protected]'}
];

var filteredValue = nameList.filter(function (item) {
      return item.name == "Joe" && item.age < 30;
});

//To See Output Result as Array
console.log(JSON.stringify(filteredValue));

You can simply use javascript :)

Solution 5 - Javascript

For those who want to filter from an array of objects using any key:

function filterItems(items, searchVal) {
  return items.filter((item) => Object.values(item).includes(searchVal));
}
let data = [
  { "name": "apple", "type": "fruit", "id": 123234 },
  { "name": "cat", "type": "animal", "id": 98989 },
  { "name": "something", "type": "other", "id": 656565 }]


console.log("Filtered by name: ", filterItems(data, "apple"));
console.log("Filtered by type: ", filterItems(data, "animal"));
console.log("Filtered by id: ", filterItems(data, 656565));

filter from an array of the JSON objects:**

Solution 6 - Javascript

var names = [{
        name: "Joe",
        age: 20,
        email: "[email protected]"
    },
    {
        name: "Mike",
        age: 50,
        email: "[email protected]"
    },
    {
        name: "Joe",
        age: 45,
        email: "[email protected]"
    }
];
const res = _.filter(names, (name) => {
    return name.name == "Joe" && name.age < 30;

});
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

Solution 7 - Javascript

So quick question. What if you have two arrays of objects and you would like to 'align' these object arrays so that you can make sure each array's objects are in the order as the other array's? What if you don't know what keys and values any of the objects inside of the arrays contains... Much less what order they're even in?

So you need a 'WildCard Expression' for your [].filter, [].map, etc. How do you get a wild card expression?

var jux = (function(){
    'use strict';
    
    function wildExp(obj){
        var keysCrude = Object.keys(obj),
            keysA = ('a["' + keysCrude.join('"], a["') + '"]').split(', '),
            keysB = ('b["' + keysCrude.join('"], b["') + '"]').split(', '),
            keys = [].concat(keysA, keysB)
                .sort(function(a, b){  return a.substring(1, a.length) > b.substring(1, b.length); });
        var exp = keys.join('').split(']b').join('] > b').split(']a').join('] || a');
        return exp;
    }
    
    return {
        sort: wildExp
    };

})();

var sortKeys = {
    k: 'v',
    key: 'val',
    n: 'p',
    name: 'param'
};
var objArray = [
    {
        k: 'z',
        key: 'g',
        n: 'a',
        name: 'b'
    },
    {
        k: 'y',
        key: 'h',
        n: 'b',
        name: 't'
    },
    {
        k: 'x',
        key: 'o',
        n: 'a',
        name: 'c'
    }
];
var exp = jux.sort(sortKeys);

console.log('@juxSort Expression:', exp);
console.log('@juxSort:', objArray.sort(function(a, b){
    return eval(exp);
}));

You can also use this function over an iteration for each object to create a better collective expression for all of the keys in each of your objects, and then filter your array that way.

This is a small snippet from the API Juxtapose which I have almost complete, which does this, object equality with exemptions, object unities, and array condensation. If these are things you need or want for your project please comment and I'll make the lib accessible sooner than later.

Hope this helps! Happy coding :)

Solution 8 - Javascript

The most straightforward and readable approach will be the usage of native javascript filter method.

Native javaScript filter takes a declarative approach in filtering array elements. Since it is a method defined on Array.prototype, it iterates on a provided array and invokes a callback on it. This callback, which acts as our filtering function, takes three parameters:

element — the current item in the array being iterated over

index — the index or location of the current element in the array that is being iterated over

array — the original array that the filter method was applied on Let’s use this filter method in an example. Note that the filter can be applied on any sort of array. In this example, we are going to filter an array of objects based on an object property.

An example of filtering an array of objects based on object properties could look something like this:

// Please do not hate me for bashing on pizza and burgers.
// and FYI, I totally made up the healthMetric param :)
let foods = [
  { type: "pizza", healthMetric: 25 },
  { type: "burger", healthMetric: 10 },
  { type: "salad", healthMetric: 60 },
  { type: "apple", healthMetric: 82 }
];
let isHealthy = food => food.healthMetric >= 50;

const result = foods.filter(isHealthy);

console.log(result.map(food => food.type));
// Result: ['salad', 'apple']

To learn more about filtering arrays in functions and yo build your own filtering, check out this article: https://medium.com/better-programming/build-your-own-filter-e88ba0dcbfae

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser441521View Question on Stackoverflow
Solution 1 - JavascriptVisioNView Answer on Stackoverflow
Solution 2 - JavascriptlonesomedayView Answer on Stackoverflow
Solution 3 - JavascriptVadim GremyachevView Answer on Stackoverflow
Solution 4 - JavascriptFakhrul HasanView Answer on Stackoverflow
Solution 5 - JavascriptArun SainiView Answer on Stackoverflow
Solution 6 - JavascriptParth RavalView Answer on Stackoverflow
Solution 7 - JavascriptCodyView Answer on Stackoverflow
Solution 8 - JavascriptKasra KhosraviView Answer on Stackoverflow