排序的数据按字母顺序从阵通过给字母的标签用于多个项目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)在作出反应的组成部分？
他们已经排，因为我们已经采取了一个 array of size 26 A->0索引，B>1指数，C->2index. . . .
在发生反应，可以处理呈现刚刚通过使用逻辑提到的在第3点中的答复。

排序的数据按字母顺序从阵通过给字母的标签用于多个项目reactjs?

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别