Sort nfts in javascript

Javascript
#1

hi im new to all this and have been building a nft minting site through tutorials, im a little stuck now, i need help with sorting my nfts by name or id by clicking on a button. how could i do this when my script look like this;

right now they are showing 5 per row and i want to be able to sort them by name and id

<LipRenderer lip={item} /> is the nft img and should also be sorted with the name etc

{data.allOwnerLips.map((item, index) => {

              return (

                <s.Container key={index} style={{ padding: "15px" }}>

                  <LipRenderer lip={item} />            

                  <s.Container style={{ padding: "15px" }}>

                    <s.TextDescription> {item.dna}</s.TextDescription>

                    <s.TextDescription> {item.name}</s.TextDescription>

                    <s.TextDescription> {item.rarity}</s.TextDescription>

                    <s.TextDescription> {item.id}</s.TextDescription>

                    <s.TextDescription> {item.level} </s.TextDescription>

                  </s.Container>

                </s.Container>
#2

Hey, this can will be done through javascript. What you want to do is the data you get you to want to store it another variable for the sake of this example let’s call it sorted data. Then what you need is a sort function. It’s not too hard to make. Here is how you can do it below

let data = [...your araay data here]
// Sort comparer
function sort(keyToSortBy){
    const sortOrder = 1;
    // Just a check for "-" keys
    if(keyToSortBy[0] === "-") {
        sortOrder = -1;
        keyToSortBy = keyToSortBy.substr(1);
    }
   return function (a,b) {
        /* next line works with strings and numbers, 
         * and you may want to customize it to your needs
         */
        var result = (a[keyToSortBy] < b[keyToSortBy]) ? -1 : (a[keyToSortBy] > b[keyToSortBy]) ? 1 : 0;
        return result * sortOrder;
    }
}

//Now for the cool part
//By Id
let filteredData = data.sort(sort("id"));
//By Name
let filteredData = data.sort(sort("name"));

Now instead of mapping over data map over filteredata.
Hope this helps man :v:

#3

thnx for ur answer but i dont understand where my array is so i can sort by data map, ive tried look up alot of different javascript sorter but i cant get my map to sort in anyway

#4

usually you can create a new list/array starting from a map/dict and then sort that list

#5

i use react and i still have not been able to solve this, anyone know a simple way to sort array list in react?

#6

try this