How to filter data and show it on top of the array?

user_12174711 0
Viewed 93

I am making a decentralized exchange in which I am trying to implement a search functionality where users put either token address, name, or symbol. But the challenge I am facing is that when users search for tokens like BUSD the token present in the user wallet will come on top. for example:-

suppose I have these tokens in my wallet and I am getting this response from web3

  [
    {
      "token_address":"0x0e262..........",
      "name":"Busy DAO",
      "symbol":"BUSY",
      "logo":null,
      "thumbnail":null,
      "decimals":"18",
      "balance":"685485000000000000000000"
    },{
      "token_address":"0x1f762..........",
      "name":"BUSD Token",
      "symbol":"BUSD",
      "logo":null,
      "thumbnail":null,
      "decimals":"18",
      "balance":"32491651588824863"
    }
  ]

Now if users searched BUS in their search box and they get a list of more than 20 or 30 tokens so I want to filter that array and want to match the symbol of searched token response and token present in my wallet and then shows the token present in a wallet on the top and show rest of the tokens according to their name or symbol (Alphabetic order) in the search list.

I tried to search this on the web but I didn't get anything regarding this.

Here is my code:

// wallet assets
const getWalletAssets = useMoralisWeb3ApiCall(moralisWeb3Api.account.getTokenBalances, {
  chain: 'bsc',
  address: connectedWallet
})

// Token Search filter (getting tokens)
const searchTokenName = coins.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))

// Sorting them according to their symbols (alphabetic order)
const searchToken = tokenData.sort((a, b) => a.symbol.localeCompare(b.symbol))
reactjs sorting arrays javascript
1 Answers

Perhaps this approach would be helpful. First filter the results that are in and out of the wallet, and then combine them into one array.

const searchResults = ['BNB','BNT','BORA','BSV','BTC','BTCB','BTCST','BTG','BTT','BUSD','DASH','DCR','DENT','DGB','DOGE','ELON','ENJ','EOS','ETC','ETH','EWT','FEI','FET','FIL'];
const walletCoins = ['BTC','DOGE','ETH', '1INCH'];

const resultInWallet = searchResults.filter((coin) => walletCoins.includes(coin));
const resultNotInWallet = searchResults.filter((coin) => !walletCoins.includes(coin));
const result = [...resultInWallet, ...resultNotInWallet];

console.log(result)
.as-console-wrapper{min-height: 100%!important; top: 0}

--- updated ---

const searchResults = [{symbol:'BNB'},{symbol:'BNT'},{symbol:'BTC'},{symbol:'BTCB'},{symbol:'BTCST'},{symbol:'BTG'},{symbol:'BTT'},{symbol:'BUSD'},{symbol:'DOGE'},{symbol:'ELON'},{symbol:'ETC'},{symbol:'ETH'},{symbol:'EWT'},{symbol:'FEI'}];
const walletCoins = [{symbol:'BTC'},{symbol:'DOGE'},{symbol:'ETH'},{symbol:'1INCH'}];

const resultObj = searchResults.reduce((acc, targetCoin) => {
  if (walletCoins.some((walletCoin) => walletCoin.symbol === targetCoin.symbol)) {
    acc.inWallet = [...acc.inWallet, targetCoin];
  } else {
    acc.notInWallet = [...acc.notInWallet, targetCoin];
  }
    
  return acc;
}, { inWallet: [],  notInWallet:[] });


const result = [...resultObj.inWallet, ...resultObj.notInWallet];

console.log(result);
.as-console-wrapper{min-height: 100%!important; top: 0}

user_877130
Related