Posortuj dane w kolejności alfabetycznej z tablicy, podając алфавитную głosowy dla wielu elementów reactjs?

Question 1

Tworzę następujący wniosek js. Tu muszę sortować dane z tablicy transportowej, a także określić алфавитную etykietę. Jak mogę to zrobić?

Przykład: mam tablicę-

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

Tu muszę pokazać to inaczej.

A
Apple

I
Itel

O
Oppo

S
Samsung
Siam
Sumia

T
Tackro
Techno

X
Xiomi

Z litery oznaczone..

Oto składniki

//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

Co można zrobić, tak to jest,

komórkowe pierwszej grupy na podstawie ich pierwszego listu
następnie pogrupuj dane sortowania dla każdej litery
Podczas wizualizacji można wyświetlić znak alfabetu w postaci index of array+'A'i rzucił go as character & pokazać tylko te grupy alfabetów, których długość>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)

Uwaga: możesz zobaczyć rzeczywisty wniosek, uruchamiając go na konsoli przeglądarki.

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

Co można zrobić, tak to jest,

komórkowe pierwszej grupy na podstawie ich pierwszego listu
następnie pogrupuj dane sortowania dla każdej litery
Podczas wizualizacji można wyświetlić znak alfabetu w postaci index of array+'A'i rzucił go as character & pokazać tylko te grupy alfabetów, których długość>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)

Uwaga: możesz zobaczyć rzeczywisty wniosek, uruchamiając go na konsoli przeglądarki.

Jak mogę pokazać etykietę alfabetu (A, B, C, D) w składniku react?
Są już posortowane, tak jak przyjęliśmy array of size 26 A -> 0 indeks, B ->> 1 indeks, C ->>> 2 indeks .... >>>
W react można przetwarzać rendering, po prostu za pomocą logiki, o których mowa w 3-m punkcie odpowiedzi.

Posortuj dane w kolejności alfabetycznej z tablicy, podając алфавитную głosowy dla wielu elementów reactjs?

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii