Trier les données par ordre alphabétique de la matrice en donnant de l'alphabet de l'étiquette de plusieurs éléments reactjs?

Question 1

Je suis entrain de créer un prochain js application. Ici, je dois trier les données du tableau par ordre alphabétique et je dois aussi donner de l'alphabet de l'étiquette. Comment puis-je le faire?

Exemple: j'ai un Tableau

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

Ici, je dois le montrer comme--

A
Apple

I
Itel

O
Oppo

S
Samsung
Siam
Sumia

T
Tackro
Techno

X
Xiomi

Avec l'Alphabet de l'étiquette..

Voici les composants

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

Ce que vous pouvez faire est,

premier groupe de téléphones basés sur leur première lettre
ensuite, le groupe de sages, de trier les données de chaque lettre
Pendant le rendu, vous pouvez afficher l' Alphabet de l'Étiquette en tant index of array+'A'et il la jeta as character & n'afficher que celles de l'alphabet d'un groupe ayant une longueur>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)

Remarque: possibilité de voir la production réelle par exécute sur le navigateur de la console.

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

Ce que vous pouvez faire est,

premier groupe de téléphones basés sur leur première lettre
ensuite, le groupe de sages, de trier les données de chaque lettre
Pendant le rendu, vous pouvez afficher l' Alphabet de l'Étiquette en tant index of array+'A'et il la jeta as character & n'afficher que celles de l'alphabet d'un groupe ayant une longueur>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)

Remarque: possibilité de voir la production réelle par exécute sur le navigateur de la console.

Comment puis-je montrer l'alphabet de l'étiquette (A, B, C, D) à réagir composant?
Ils sont déjà triés que nous avons pris un array of size 26 A -> index 0, B> 1, l'index, C -> 2 index . . . .
Dans de réagir, vous pouvez gérer le rendu juste par l'aide de la logique mentionné dans le 3e point de la réponse.

Trier les données par ordre alphabétique de la matrice en donnant de l'alphabet de l'étiquette de plusieurs éléments reactjs?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie