Фильтровать, сортировать и отображать массив на основе условий в Javascript

1

Мои данные следующие

  data=[
{
id: 1,
name: 'John Doe',
contacts: '[email protected]',
accepted: true
},
{
id: 2,
name: 'Jane Doe',
contacts: '[email protected]',
accepted: false
},

]

Я хочу фильтровать (если переменная filterKey не пуста /null) и сортировать (если переменная sortKey не пуста /null). Я могу сделать это с некоторыми if/then, но есть ли лучший способ?

 let computedList = data
 if(filterKey) {
      computedList = data.filter(item => item.name.includes(filterKey))
 }  
 if(sortKey) {
      computedList = data.sort(...)
 }
 computedList.map(item => <div>item.name</div>)
  • 0
    Откуда берутся filterKey и sortKey ?
  • 0
    Ваше решение не работает, если filterKey и filterKey и sortKey , оно всегда сортирует data не результат фильтра.
Показать ещё 1 комментарий
Теги:
sorting
filter

2 ответа

2
Лучший ответ

Я могу сделать это с некоторыми if/then, но есть ли лучший способ?

Не на самом деле нет. Это самый чистый, самый ясный способ, на самом деле нет необходимости в альтернативе, если вы не работаете в определенных стилях программирования (например, в функциональном программировании), которые вам кажутся не такими. Но вы хотите использовать computedList, а не data, в инструкции sort (в случае, если вы отфильтровали). И, конечно, вам нужно что-то сделать с возвращаемым значением map.

Сторона примечания: sort на месте, поэтому нет необходимости в назначении, и если вы не являетесь владельцем точек data массива, вы можете сначала клонировать, если вы не фильтруете. Например:

let computedList = filterKey ? data.filter(item => item.name.includes(filterKey)) : data.slice();
if (sortKey) {
    computedList.sort(/*...*/);
}
let result = computedList.map(item => <div>item.name</div>);

или, возможно,

let computedList = data;
if (filterKey) {
    computedList = computedList.filter(item => item.name.includes(filterKey));
}
if (sortKey) {
    if (!filterKey) {
        computedList = computedList.slice();
    }
    computedList.sort(/*...*/);
}
let result = computedList.map(item => <div>item.name</div>);

... чтобы избежать копирования, если вам не нужно.

Поделиться
  • 0
    Да, я имел в виду использовать computedList в блоке sortKey
  • 0
    @ Alexandru-IonutMihai: Вы не знаете, кто отклонил ваш ответ. Если вы предполагаете, что знаете, вы будете ошибаться чаще, чем правы. Но отдельно, даже если бы я это сделал, нет ничего полезного, чтобы спросить, почему. Если бы downvoter хотел предоставить обратную связь, он / она сделал бы это.
Показать ещё 1 комментарий
1

Ничего плохого в if/else сейчас и потом. Однако вы можете "скрыть" состав if functions:

const data = [ 
  {id: 1, name: 'John Doe', contacts: '[email protected]', accepted: true},
  {id: 2, name: 'Jane Doe', contacts: '[email protected]', accepted: false},
  {id: 3, name: 'Jane J', contacts: '[email protected]', accepted: false}
];

const filter = (data, filterKey) => filterKey ? data.filter(item => item.name.includes(filterKey)) : data

const sort = (data, sortKey) => sortKey ? [...data].sort((a, b) => a[sortKey] > b[sortKey]) : data

const filterKey = 'Doe'
const sortKey = 'name'
const computedList = sort(filter(data, filterKey), sortKey)
      // .map(item => <div>item.name</div>) // removed for the demo
console.log(computedList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню