javascript filter array кілька умов


78

Я хочу спростити масив об'єктів. Припустимо, що у мене є такий масив:

var users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
    },
    {
        name: 'Tom',
        email: 'tom@mail.com',
        age: 35,
        address: 'England'
    },
    {
        name: 'Mark',
        email: 'mark@mail.com',
        age: 28,
        address: 'England'
}];

І об’єкт фільтрації:

var filter = {address: 'England', name: 'Mark'};

Наприклад, мені потрібно відфільтрувати всіх користувачів за адресою та іменем, тому я перебираю властивості об'єкта фільтра та перевіряю це:

function filterUsers (users, filter) {
    var result = [];
    for (var prop in filter) {
        if (filter.hasOwnProperty(prop)) {

            //at the first iteration prop will be address
            for (var i = 0; i < filter.length; i++) {
                if (users[i][prop] === filter[prop]) {
                    result.push(users[i]);
                }
            }
        }
    }
    return result;
}

Отже, під час першої ітерації, коли prop - addressбуде рівно, 'England'до результату масиву будуть додані два користувачі (з іменем Том і Марк), але на другій ітерації, коли prop nameбуде рівним, Markдо результату масиву повинен бути доданий лише останній користувач, але в підсумку я отримую двох елементи в масиві.

Я трохи зрозумів, чому це відбувається, але все ще затримався на цьому і не міг знайти хорошого рішення, щоб це виправити. Будь-яка допомога помітна. Дякую.


чому ти циклюєшся з користувачами 2 рази?
webduvet

Відповіді:


115

Ви можете зробити так

var filter = {
  address: 'England',
  name: 'Mark'
};
var users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];


users= users.filter(function(item) {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});

console.log(users)


1
це добре, але насправді я отримую Uncaught ReferenceError: фільтр не визначено
Леандро

3
Вам слід вибрати іншу назву для змінної фільтра. Погана практика кодування - надавати змінним захищені імена. Тим більше, що ви в кінцевому підсумку використовуєте це захищене ім'я через кілька рядків для виклику методу Array.prototype.filter.
Надав

Чудова відповідь. Як щодо того, коли ви хочете фільтрувати за кількома критеріями, наприклад: var filter_address = ['Англія', 'Великобританія']; var filter_name = ['Том', 'Енн']; ?
andrussk

1
@andrussk var country = ["England", "UK"], names = ["Tom", "Anne"]; users.filter (el => (country.indexOf (el.address)> = 0 && names.indexOf (el.name)> = 0));
Анудж Шрівастава

Що робити, якщо умовою фільтра є масив?
Arj 1411

31

Якщо ви знаєте назву фільтрів, ви можете зробити це в рядку.

users = users.filter(obj => obj.name == filter.name && obj.address == filter.address)

7
це передбачає, що у вас є і ім’я, і адреса як фільтри
pixelknitter

1
@EddieFreeman, як би ви це вирішили, якби не знали, які фільтри у вас будуть?
кульланрок

24

Ще одна думка для тих, хто любить стислий код.

Примітка : ФІЛЬТР метод може приймати додатковий цей аргумент, то з допомогою функції в E6 стрілкою ми можемо використовувати правильне це , щоб отримати хороший один вкладиш.

var users = [{name: 'John',email: 'johnson@mail.com',age: 25,address: 'USA'},
             {name: 'Tom',email: 'tom@mail.com',age: 35,address: 'England'},
             {name: 'Mark',email: 'mark@mail.com',age: 28,address: 'England'}];

var query = {address: "England", name: "Mark"};

var result = users.filter(search, query);

function search(user){
  return Object.keys(this).every((key) => user[key] === this[key]);
}




// |----------------------- Code for displaying results -----------------|
var element = document.getElementById('result');

function createMarkUp(data){
  Object.keys(query).forEach(function(key){
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(
    key.toUpperCase() + ': ' + result[0][key]));
    element.appendChild(p);
  });
}

createMarkUp(result);
<div id="result"></div>


9

Ось версія ES6 використання функції стрілки у фільтрі. Опублікувавши це як відповідь, оскільки більшість із нас сьогодні використовують ES6 і можуть допомогти читачам розширити фільтрацію за допомогою функції стрілки, let and const.

const filter = {
  address: 'England',
  name: 'Mark'
};
let users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];


users= users.filter(item => {
  for (let key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});

console.log(users)


9

Використовуючи Array.Filter () із функціями стрілки, ми можемо досягти цього за допомогою

users = users.filter (x => x.name == 'Позначити' && x.address == 'Англія');

Ось повний опис

// initializing list of users
var users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];

//filtering the users array and saving 
//result back in users variable
users = users.filter(x => x.name == 'Mark' && x.address == 'England');


//logging out the result in console
console.log(users);


1
Порівняння x.name == 'Позначити' може спричинити несподіваний примус типу
клавіатура-воїн

7

Це також можна зробити таким чином:

    this.users = this.users.filter((item) => {
                return (item.name.toString().toLowerCase().indexOf(val.toLowerCase()) > -1 ||
                item.address.toLowerCase().indexOf(val.toLowerCase()) > -1 ||
                item.age.toLowerCase().indexOf(val.toLowerCase()) > -1 ||
                item.email.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })


4

Думаю, це може допомогти.

const filters = ['a', 'b'];

const results = [
  {
    name: 'Result 1',
    category: ['a']
  },
  {
    name: 'Result 2',
    category: ['a', 'b']
  },
  {
    name: 'Result 3',
    category: ['c', 'a', 'b', 'd']
  }
];

const filteredResults = results.filter(item =>
  filters.every(val => item.category.indexOf(val) > -1)
);

console.log(filteredResults);
  


&&Оператор зробив роботу
Ousama

1
Ви також можете використовувати Array.every (), я оновив код.
Кошкун Деніз

1

функціональне рішення

function applyFilters(data, filters) {
  return data.filter(item =>
    Object.keys(filters)
      .map(keyToFilterOn =>
        item[keyToFilterOn].includes(filters[keyToFilterOn]),
      )
      .reduce((x, y) => x && y, true),
  );
}

це повинно зробити роботу

applyFilters(users, filter);


0

Якщо остаточність вашого коду полягає у отриманні відфільтрованого користувача, я б інвертував forоцінку userзамість того, щоб зменшувати масив результатів під час кожної ітерації.

Ось (неперевірений) приклад:

function filterUsers (users, filter) {
    var result = [];

    for (i=0;i<users.length;i++){
        for (var prop in filter) {
            if (users.hasOwnProperty(prop) && users[i][prop] === filter[prop]) {
                result.push(users[i]);
            }
        }
    }
    return result;
}

0

зі складом деяких маленьких помічників:

const filter = {address: 'England', name: 'Mark'};
console.log( 
  users.filter(and(map(propMatches)(filter)))
)

function propMatches<T>(property: string, value: any) {
  return (item: T): boolean => item[property] === value
}

function map<T>(mapper: (key: string, value: any, obj: T) => (item:T) => any) {
  return (obj: T) => {
    return Object.keys(obj).map((key) => {
      return mapper(key, obj[key], obj)
    });
  }
}

export function and<T>(predicates: ((item: T) => boolean)[]) {
  return (item: T) =>
    predicates.reduce(
        (acc: boolean, predicate: (item: T) => boolean) => {
            if (acc === undefined) {
                return !!predicate(item);
            }
            return !!predicate(item) && acc;
        },
        undefined // initial accumulator value
    );
}

Що це за мова? Це питання JavaScript.
mikemaccana

Ні це не так. SyntaxError: Unexpected token '<'
mikemaccana

це машинопис.
nils petersohn

0

Це легко зрозуміле функціональне рішення

let filtersObject = {
  address: "England",
  name: "Mark"
};

let users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];

function filterUsers(users, filtersObject) {
  //Loop through all key-value pairs in filtersObject
  Object.keys(filtersObject).forEach(function(key) {
    //Loop through users array checking each userObject
    users = users.filter(function(userObject) {
      //If userObject's key:value is same as filtersObject's key:value, they stay in users array
      return userObject[key] === filtersObject[key]
    })
  });
  return users;
}

//ES6
function filterUsersES(users, filtersObject) {
  for (let key in filtersObject) {
    users = users.filter((userObject) => userObject[key] === filtersObject[key]);
  }
  return users;
}

console.log(filterUsers(users, filtersObject));
console.log(filterUsersES(users, filtersObject));


0

Це ще один метод, який я з’ясував, де filteredUsers - це функція, яка повертає відсортований список користувачів.

var filtersample = {address: 'England', name: 'Mark'};

filteredUsers() {
  return this.users.filter((element) => {
    return element['address'].toLowerCase().match(this.filtersample['address'].toLowerCase()) || element['name'].toLowerCase().match(this.filtersample['name'].toLowerCase());
  })
}


0
const users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];

const filteredUsers = users.filter(({ name, age }) => name === 'Tom' && age === 35)

console.log(filteredUsers)


1
Хоча цей код може запропонувати вирішення питання, краще додати контекст щодо того, чому / як це працює. Це може допомогти майбутнім користувачам навчитися та застосувати ці знання до власного коду. Ви також можете отримати позитивні відгуки користувачів у вигляді голосів "за", коли пояснюється код.
borchvm

0

Ви перейдете до більшої гнучкості, якщо перетворите значення у об’єкті фільтра в масиви:

var filter = {address: ['England'], name: ['Mark'] };

Таким чином ви можете відфільтрувати такі речі, як "Англія" або "Шотландія", тобто результати можуть містити записи для Англії та Шотландії:

var filter = {address: ['England', 'Scotland'], name: ['Mark'] };

За допомогою цього налаштування функцією фільтрації може бути:

const applyFilter = (data, filter) => data.filter(obj =>
    Object.entries(filter).every(([prop, find]) => find.includes(obj[prop]))
);

// demo
var users = [{name: 'John',email: 'johnson@mail.com',age: 25,address: 'USA'},{name: 'Tom',email: 'tom@mail.com',age: 35,address: 'England'},{name: 'Mark',email: 'mark@mail.com',age: 28,address: 'England'}];var filter = {address: ['England'], name: ['Mark'] };
var filter = {address: ['England'], name: ['Mark'] };

console.log(applyFilter(users, filter));


0

Якщо ви хочете поставити кілька умов filter, ви можете використовувати &&і ||оператор.

var product= Object.values(arr_products).filter(x => x.Status==status && x.email==user)

-1
const data = [{
    realName: 'Sean Bean',
    characterName: 'Eddard “Ned” Stark'
}, {
    realName: 'Kit Harington',
    characterName: 'Jon Snow'
}, {
    realName: 'Peter Dinklage',
    characterName: 'Tyrion Lannister'
}, {
    realName: 'Lena Headey',
    characterName: 'Cersei Lannister'
}, {
    realName: 'Michelle Fairley',
    characterName: 'Catelyn Stark'
}, {
    realName: 'Nikolaj Coster-Waldau',
    characterName: 'Jaime Lannister'
}, {
    realName: 'Maisie Williams',
    characterName: 'Arya Stark'
}];

const filterKeys = ['realName', 'characterName'];


const multiFilter = (data = [], filterKeys = [], value = '') => data.filter((item) => filterKeys.some(key => item[key].toString().toLowerCase().includes(value.toLowerCase()) && item[key]));


let filteredData = multiFilter(data, filterKeys, 'stark');

console.info(filteredData);
/* [{
  "realName": "Sean Bean",
  "characterName": "Eddard “Ned” Stark"
}, {
  "realName": "Michelle Fairley",
  "characterName": "Catelyn Stark"
}, {
  "realName": "Maisie Williams",
  "characterName": "Arya Stark"
}]
 */
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.