オブジェクトのjavascriptフィルター配列


84

オブジェクトの配列があり、それを検索するための最良の方法を考えています。以下の例で、name = "Joe"とを検索するにはどうすればよいage < 30ですか?jQueryが役立つものはありますか、それともこの検索を自分でブルートフォースする必要がありますか?

var names = new Array();

var object = { name : "Joe", age:20, email: "joe@hotmail.com"};
names.push(object);

object = { name : "Mike", age:50, email: "mike@hotmail.com"};
names.push(object);

object = { name : "Joe", age:45, email: "mike@hotmail.com"};
names.push(object);

検索とは、フィルターを意味しますか?
joragupra 2013

検索!=フィルター。どちらがいいですか?
TJ Crowder 2018年

回答:



77

これは、次の[].filter方法で非常に簡単に実行できます。

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

この[].filterメソッドをサポートしていないブラウザにはシムを追加する必要があります。このMDNページにそのようなコードがあります。


リンクされたMDNページのポリフィルを見て、コードを読んで楽しんだり、新しいことを学んだりすることをお勧めします。
Aurelio 2015

10

jQuery.filter()関数を利用して、一致する要素のサブセットから要素を返すことができます。

var names = [
    { name : "Joe", age:20, email: "joe@hotmail.com"},
    { name : "Mike", age:50, email: "mike@hotmail.com"},
    { name : "Joe", age:45, email: "mike@hotmail.com"}
   ];
   
   
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"/>


9

var nameList = [
{name:'x', age:20, email:'x@email.com'},
{name:'y', age:60, email:'y@email.com'},
{name:'Joe', age:22, email:'joe@email.com'},
{name:'Abc', age:40, email:'abc@email.com'}
];

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

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

あなたは単にjavascriptを使うことができます:)


3

任意のキーを使用してオブジェクトの配列からフィルタリングしたい場合:

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

JSONオブジェクトの配列からのフィルター:**


2

var names = [{
        name: "Joe",
        age: 20,
        email: "joe@hotmail.com"
    },
    {
        name: "Mike",
        age: 50,
        email: "mike@hotmail.com"
    },
    {
        name: "Joe",
        age: 45,
        email: "mike@hotmail.com"
    }
];
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>


1

とても簡単な質問です。オブジェクトの配列が2つあり、これらのオブジェクト配列を「整列」させて、各配列のオブジェクトが他の配列のオブジェクトと同じ順序になっていることを確認したい場合はどうでしょうか。配列内のオブジェクトに含まれているキーと値がわからない場合はどうなりますか...ましてや、それらがどのような順序であるかはわかりません。

あなたのための「ワイルドカード表現」を必要とするので[].filter[].mapなどがどのようにワイルドカード表現を得るのですか?

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

また、各オブジェクトの反復でこの関数を使用して、各オブジェクトのすべてのキーに対してより適切な集合式を作成し、その方法で配列をフィルター処理することもできます。

これは、私がほぼ完成したAPI Juxtaposeからの小さなスニペットであり、これを実行します。これは、オブジェクトの同等性と免除、オブジェクトの単一性、および配列の凝縮です。これらがプロジェクトに必要または必要なものである場合は、コメントしてください。ライブラリにアクセスできるようにします。

お役に立てれば!ハッピーコーディング:)


0

最も簡単で読みやすいアプローチは、ネイティブjavascriptフィルターメソッドの使用です。

ネイティブjavaScriptフィルターは、配列要素のフィルター処理において宣言型アプローチを採用しています。これはArray.prototypeで定義されたメソッドであるため、指定された配列を反復処理し、その配列に対してコールバックを呼び出します。フィルタリング関数として機能するこのコールバックは、次の3つのパラメーターを取ります。

element —繰り返される配列内の現在のアイテム

index —繰り返されている配列内の現在の要素のインデックスまたは場所

array—フィルターメソッドが適用された元の配列例でこのフィルターメソッドを使用してみましょう。フィルタはあらゆる種類のアレイに適用できることに注意してください。この例では、オブジェクトのプロパティに基づいてオブジェクトの配列をフィルタリングします。

オブジェクトのプロパティに基づいてオブジェクトの配列をフィルタリングする例は、次のようになります。

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

関数での配列のフィルタリングと独自のフィルタリングの構築について詳しくは、次の記事をご覧くださいhttps//medium.com/better-programming/build-your-own-filter-e88ba0dcbfae

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.