Ordinare i dati in ordine alfabetico dalla matrice dando alfabeto etichetta per più articoli reactjs?

Question 1

Sto creando un prossimo js applicazione. Qui devo ordinare i dati da un array in ordine alfabetico e devo anche dare alfabeto etichetta. Come posso fare?

Esempio: ho un Array

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

Qui devo mostrare come--

A
Apple

I
Itel

O
Oppo

S
Samsung
Siam
Sumia

T
Tackro
Techno

X
Xiomi

Con Alfabeto etichetta..

Ecco i componenti

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

Cosa si può fare è,

primo gruppo di telefoni basati su di loro prima lettera
quindi gruppo di saggi, di ordinare i dati di ogni lettera
Durante il rendering, è possibile mostrare l' Alfabeto Etichetta come index of array+'A'e il cast as character & vedi solo quelli alfabeto gruppo con lunghezza>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)

Nota: è possibile vedere l'effettiva uscita in esecuzione sul browser della console.

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

Cosa si può fare è,

primo gruppo di telefoni basati su di loro prima lettera
quindi gruppo di saggi, di ordinare i dati di ogni lettera
Durante il rendering, è possibile mostrare l' Alfabeto Etichetta come index of array+'A'e il cast as character & vedi solo quelli alfabeto gruppo con lunghezza>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)

Nota: è possibile vedere l'effettiva uscita in esecuzione sul browser della console.

Come posso mostrare l'alfabeto etichetta (A, B, C, D), reagiscono componente?
Sono già ordinata come abbiamo preso un array of size 26 A -> 0 indice, B -> 1 indice, C -> 2 indice . . . .
In reazione, si può gestire il rendering utilizzando la logica menzionato nel 3 ° punto nella risposta.

Ordinare i dati in ordine alfabetico dalla matrice dando alfabeto etichetta per più articoli reactjs?

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria