Javascript Filter Array von Objekten

84

Ich habe eine Reihe von Objekten und frage mich, wie ich sie am besten durchsuchen kann. Wie kann ich anhand des folgenden Beispiels nach name = "Joe"und suchen age < 30? Gibt es irgendetwas, bei dem jQuery helfen kann, oder muss ich diese Suche selbst brutal erzwingen?

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);
user441521
quelle
Mit Suche meinen Sie Filter?
Joragupra
Suche! = Filter. Welches willst du?
TJ Crowder

Antworten:

77

Sie können dies sehr einfach mit der [].filterMethode tun :

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

Sie müssen einen Shim für Browser hinzufügen, die die [].filterMethode nicht unterstützen : Diese MDN-Seite enthält solchen Code.

einsamer Tag
quelle
Ich schlage vor, einen Blick auf die Polyfüllung auf der verlinkten MDN-Seite zu werfen, um Spaß beim Lesen von Code zu haben und möglicherweise etwas Neues zu lernen.
Aurelio
10

Sie können die Funktion jQuery.filter () verwenden, um Elemente aus einer Teilmenge der übereinstimmenden Elemente zurückzugeben.

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"/>

Vadim Gremyachev
quelle
9

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));

Sie können einfach Javascript verwenden :)

Fakhrul Hasan
quelle
3

Für diejenigen, die mit einem beliebigen Schlüssel aus einem Array von Objekten filtern möchten:

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 aus einem Array der JSON-Objekte: **

Arun Saini
quelle
2

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>

Parth
quelle
1

Also schnelle Frage. Was ist, wenn Sie zwei Arrays von Objekten haben und diese Objektarrays "ausrichten" möchten, damit Sie sicherstellen können, dass die Objekte jedes Arrays in der Reihenfolge der anderen Arrays sind? Was ist, wenn Sie nicht wissen, welche Schlüssel und Werte eines der Objekte in den Arrays enthält ... Ganz zu schweigen von der Reihenfolge, in der sie sich gerade befinden?

So haben Sie einen ‚WildCard Expression‘ für Ihre benötigen [].filter, [].mapetc. Wie bekommt man einen Wild Card Ausdruck?

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);
}));

Sie können diese Funktion auch über eine Iteration für jedes Objekt verwenden, um einen besseren kollektiven Ausdruck für alle Schlüssel in jedem Ihrer Objekte zu erstellen und dann Ihr Array auf diese Weise zu filtern.

Dies ist ein kleiner Ausschnitt aus der API Juxtapose, den ich fast vollständig habe. Dies geschieht, Objektgleichheit mit Ausnahmen, Objekteinheiten und Array-Kondensation. Wenn dies Dinge sind, die Sie für Ihr Projekt benötigen oder wollen, kommentieren Sie dies bitte und ich werde die Bibliothek früher als später zugänglich machen.

Hoffe das hilft! Viel Spaß beim Codieren :)

Cody
quelle
0

Der einfachste und lesbarste Ansatz ist die Verwendung der nativen Javascript-Filtermethode.

Der native JavaScript-Filter verfolgt beim Filtern von Array-Elementen einen deklarativen Ansatz. Da es sich um eine in Array.prototype definierte Methode handelt, iteriert sie in einem bereitgestellten Array und ruft einen Rückruf auf. Dieser Rückruf, der als Filterfunktion fungiert, verwendet drei Parameter:

element - Das aktuelle Element im Array, über das iteriert wird

index - Der Index oder die Position des aktuellen Elements im Array, über das iteriert wird

array- Das ursprüngliche Array, auf das die Filtermethode angewendet wurde. Verwenden wir diese Filtermethode in einem Beispiel. Beachten Sie, dass der Filter auf jede Art von Array angewendet werden kann. In diesem Beispiel filtern wir ein Array von Objekten basierend auf einer Objekteigenschaft.

Ein Beispiel für das Filtern eines Arrays von Objekten basierend auf Objekteigenschaften könnte ungefähr so ​​aussehen:

// 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']

Weitere Informationen zum Filtern von Arrays in Funktionen und zum Erstellen eigener Filter finden Sie in diesem Artikel: https://medium.com/better-programming/build-your-own-filter-e88ba0dcbfae

Kasra Khosravi
quelle