알파벳순으로 정렬 데이터 배열에서 제공하여 알파벳 라벨에 대한 여러 항목을 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 & 보여만 그룹 알파벳 length>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)

참고:볼 수 있는 실제 실행하여 출력에 브라우저의 console.

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

당신이 할 수있는 것은,

첫 번째 그룹 전반에 그들의 첫 번째 편지
그런 다음 그룹 현명한 정렬 데이터 의 각 문자
렌더링하는 동안,당신을 보여줄 수 있 는 알파벳 레이블 로 index of array+'A'고 캐스팅 as character & 보여만 그룹 알파벳 length>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)

참고:볼 수 있는 실제 실행하여 출력에 브라우저의 console.

할 수 있는 방법을 보여 알파벳이블(A,B,C,D)react?
그들은 이미 정렬되어 있으로 우리는 촬영 array of size 26 A->0 지 B->1 인덱스,C->2 인덱스,. . . .
에 반응하는,당신은 처리할 수 있는 렌더링을 사용하여 논리에서 언급한 3 점에서 대답이다.

알파벳순으로 정렬 데이터 배열에서 제공하여 알파벳 라벨에 대한 여러 항목을 reactjs?

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리