Отфильтруйте массив, чтобы получить уникальные значения и заполнить выпадающий список - PullRequest
Новая
       29

Отфильтруйте массив, чтобы получить уникальные значения и заполнить выпадающий список

0 голосов
/ 17 апреля 2020

У меня есть массив из API, который может содержать комбинацию из 4 различных значений:

(нет, A, B, C)

Этот массив используется для заполнения раскрывающегося списка выбора.

Когда я запускаю веб-приложение, раскрывающийся список (выбор), который выглядит следующим образом на моей веб-странице: 

<select>
    <option value>All</option>
    <option value="A,B,C">ABC</option>
    <option value></option>
    <option value="A,C">AC</option>
    <option value="B">B</option>
    <option value="B,C">BC</option>
    <option value="C">C</option>
select>

Когда я хочу, чтобы это выглядело так: 

<select>
    <option value>All</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Эта функция динамически заполняется из состояния с помощью этой функции в библиотеке React-Table: 

function SelectColumnFilter({
    column: { filterValue, setFilter, preFilteredRows, id },
}) {
    // Calculate the options for filtering
    // using the preFilteredRows
    const options = React.useMemo(() => {
        const options = new Set()
        preFilteredRows.forEach(row => {
            options.add(row.values[id])
        })
        return [...options.values()]
    }, [id, preFilteredRows])
    console.log("SelectColumnFilter: ", options);

Когда я записываю параметры к консоли вот что я вижу: 

0: (3) ["A", "B", "C"]
1: (0) []
2: (2) ["A", "C"
3: (1) ["B"]
4: (2) ["B", "C"]
5: (1) ["C"]

Так как я знаю, что есть только 4 возможных значения, Все, A, B и C, которые я хочу иметь в своем элементе управления select Мне было интересно, есть ли способ отфильтровать массивы параметров, чтобы показать только каждое уникальное значение, чтобы оно выглядело так: 

<select>
    <option value>All</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Просто уменьшите ваш массив в один гигантский массив и преобразуйте его в набор. 

array = [["A", "B", "C"],[],["A", "C"],["B"],["B", "C"],["C"]]
const all = array.reduce((acc, inner) => acc.concat(inner), []) 
const unique = new Set(all)
console.log(unique)
1 голос
/ 17 апреля 2020

Добавьте проверку в forEach и сначала создайте временный массив, затем верните Set, чтобы сделать его уникальным: 

let tempArr = [];
preFilteredRows.forEach(row => {
    if(row.values[id].length == 1) tempArr.push(row.values[id][0])
})
return [...new Set(tempArr)]

И вы можете добавить опцию по умолчанию для значения All или None, в зависимости от случая

...