Отсортируйте данные в алфавитном порядке из массива, указав алфавитную метку для нескольких элементов reactjs?

Question 1

Я создаю следующее приложение js. Здесь я должен отсортировать данные из массива по алфавиту, а также указать алфавитную метку. Как я могу это сделать?

Пример: У меня есть массив-

export default [
    { name: "Xioami" },
    { name: "Samsung" },
    { name: "Sumia" },
    { name: "Siam" },
    { name: "Tackro" },
    { name: "Apple" },
    { name: "Oppo" },
    { name: "Techno" },
    { name: "Itel" },
]

Здесь я должен показать это так--

A
Apple

I
Itel

O
Oppo

S
Samsung
Siam
Sumia

T
Tackro
Techno

X
Xiomi

С буквенной меткой..

Вот компоненты

//Data
import BrandData from "Data/Header/Brand.Data";

const Brand = ({ setFilterData, filterData }) => {
    return (
        <List className={classes.List}>
            {brands &&
                brands.map((brand, i) => (
                    <ListItem key={i}>
                        {brand.name}
                    </ListItem>
                ))
            }
        </List>
    );
};
export default Brand;

Question 2

Что вы можете сделать, так это,

телефоны первой группы на основе их первого письма
затем сгруппируйте данные сортировки по каждой букве
Во время визуализации вы можете отобразить метку алфавита в виде index of array+'A'и бросил его as character & показывать только те группы алфавитов, длина которых>0>

     

const arr = [
    { name: "Xioami" },
    { name: "Samsung" },
    { name: "Apple" },
    { name: "Oppo" },
    { name: "Techno" },
    { name: "Itel" },
    { name: "Samsung1" },
    { name: "Apple1" },
    { name: "Apple2" },
    { name: "Oppo1" },
    { name: "Oppo2" },
    { name: "Oppo3" },
    { name: "Itel1" },
]

let alphabeticallyGrouped = [...Array(26)].fill([])

arr.forEach((phone) => {
    let index = phone.name[0].charCodeAt(0) - 'A'.charCodeAt(0);
    alphabeticallyGrouped[index] = [...alphabeticallyGrouped[index],phone]
});

const alphabeticallySorted = [...alphabeticallyGrouped].map(group => group.sort());

console.log(alphabeticallySorted)

Примечание: вы можете увидеть фактический вывод, запустив его на консоли браузера.

Himanshu Singh · Answer 1 · 2021-11-23T18:27:12

Что вы можете сделать, так это,

телефоны первой группы на основе их первого письма
затем сгруппируйте данные сортировки по каждой букве
Во время визуализации вы можете отобразить метку алфавита в виде index of array+'A'и бросил его as character & показывать только те группы алфавитов, длина которых>0>

     

const arr = [
    { name: "Xioami" },
    { name: "Samsung" },
    { name: "Apple" },
    { name: "Oppo" },
    { name: "Techno" },
    { name: "Itel" },
    { name: "Samsung1" },
    { name: "Apple1" },
    { name: "Apple2" },
    { name: "Oppo1" },
    { name: "Oppo2" },
    { name: "Oppo3" },
    { name: "Itel1" },
]

let alphabeticallyGrouped = [...Array(26)].fill([])

arr.forEach((phone) => {
    let index = phone.name[0].charCodeAt(0) - 'A'.charCodeAt(0);
    alphabeticallyGrouped[index] = [...alphabeticallyGrouped[index],phone]
});

const alphabeticallySorted = [...alphabeticallyGrouped].map(group => group.sort());

console.log(alphabeticallySorted)

Примечание: вы можете увидеть фактический вывод, запустив его на консоли браузера.

Как я могу показать метку алфавита (A, B, C, D) в компоненте react?
Они уже отсортированы, так как мы приняли array of size 26 A -> 0 индекс, B ->> 1 индекс, C ->>> 2 индекс, .... >>>
В react вы можете обрабатывать рендеринг, просто используя логику, упомянутую в 3-м пункте ответа.

Отсортируйте данные в алфавитном порядке из массива, указав алфавитную метку для нескольких элементов reactjs?

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории