javascript фільтр масив об'єктів


85

У мене є масив об’єктів, і мені цікаво, як найкраще його шукати. Враховуючи наведений нижче приклад, як я можу шукати 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

пошук! = фільтр. Що ти хочеш?
TJ Crowder

Відповіді:



77

Ви можете зробити це дуже легко за допомогою [].filterметоду:

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

Вам потрібно буде додати прокладку для браузерів, які не підтримують [].filterметод: ця сторінка MDN містить такий код.


Я пропоную поглянути на поліфіл на пов’язаній сторінці MDN, щоб просто розважитися читати код і, можливо, дізнатися щось нове.
Aurelio

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

Так швидке запитання. Що робити, якщо у вас є два масиви об’єктів, і ви хотіли б “вирівняти” ці масиви об’єктів, щоб ви могли переконатися, що об’єкти кожного масиву знаходяться в порядку, як інші масиви? Що робити, якщо ви не знаєте, які ключі та значення містить будь-який з об’єктів усередині масивів ... Набагато менше, в якому порядку вони навіть знаходяться?

Так що вам потрібно «WildCard Expression» для свого [].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, який я майже завершив, що робить це, рівність об’єктів з винятками, об’єднання об’єктів та конденсацію масиву. Якщо це все, що вам потрібно чи потрібно для вашого проекту, будь ласка, коментуйте, і я зроблю доступ до lib раніше, ніж пізніше.

Сподіваюся, це допомагає! Щасливого кодування :)


0

Найбільш простим і зрозумілим підходом буде використання власного методу фільтрації javascript.

Власний фільтр javaScript застосовує декларативний підхід до фільтрації елементів масиву. Оскільки це метод, визначений на Array.prototype, він виконує ітерацію для наданого масиву та викликає для нього зворотний виклик. Цей зворотний виклик, який виконує функцію фільтрації, приймає три параметри:

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.