how to sort the data from json for the different different routes?

Question

this is my app.js The app.js file render the Leaderboard component for each route like /rank,/point,/age,/name

this is my json: here is my data contain rank,point,name,age. I want this detail should be sorted by rank,point,name,age .that is when the route is /rank The table data in Leaderboard should be sorted by rank and render that

    {"list":[
        {
            "rank":"1",
            "points":"1025",
            "name":"John Doe",
            "age":"27"
        },
        {
            "rank":"3",
            "points":"245",
            "name":"Elizabeth",
            "age":"17"
        },
        {
            "rank":"2",
            "points":"566",
            "name":"Samantha",
            "age":"22"
        }]
    }

This is my leaderboard component

    function LeaderBoard({sorted}) {
    let history = useHistory();
    let newList;
    console.log(sorted); 
    let lists = response.list
    const handleClick =()=>{
        history.push('/rank')
    }
    return (
        
             
                
                    
                    
                    
                    
                
            
            
                
                    {lists.map((ele,index)=>{
                        // console.log(index)
                        return(
                            
                        )
                    })}
                    
                    
                        
                            Rank
                            Name
                            Points
                            Age
                        
                    
                    
                                {ele.rank}
                                {ele.name}
                                {ele.points}
                                {ele.age}
                            
                
            
        
    );
}
export default LeaderBoard;

how to sort the json file by each rank,name,point,age and render it

user_3820189 · Answer

You should export the JSON array.
Import that file in Leaderboard component import List from './path/to/json_file/list.json';
Then write the code to sort the array.
if you are lodash library then it's fairly simple

const orderedList= _.sortBy(List, list => list.rank)

user_17487348 · Answer

You could just pass a property sortBy (or obtain that information from the URL path) depending on which key you want to sort by and then sort your data within the component based on that key.

Here one way how you could do that:

const data = [
  {
    rank: "1",
    points: "1025",
    name: "John Doe",
    age: "27",
  },
  {
    rank: "3",
    points: "245",
    name: "Elizabeth",
    age: "17",
  },
  {
    rank: "2",
    points: "566",
    name: "Samantha",
    age: "22",
  },
];

const Table = ({ list, sortBy }) => {
  const [data, setData] = React.useState(list);
  const [sortedBy, setSortedBy] = React.useState(sortBy);

  const sorted = data.sort((a, b) => {
    let aVal = a[sortedBy];
    let bVal = b[sortedBy];
    if (typeof aVal === typeof bVal && aVal !== undefined) {
      // parse points to Number so they are sorted correctly
      if (sortedBy === "points") {
        aVal = Number(aVal);
        bVal = Number(bVal);
      }
      if (typeof aVal === "number") return aVal - bVal;
      else if (typeof aVal === "string") return aVal.localeCompare(bVal);
    }
    return 1;
  });

  return (
    
      {`Sorted by '${sortBy}'`}
      
          {sorted.map((item) => (
            
          ))}
        
        
          
            Rank
            Points
            Name
            Age
          
        
        
              {item.rank}
              {item.points}
              {item.name}
              {item.age}
            
      
    
  );
};

const Wrapper = () => {
  return (
    
      
      

      

      
  );
};

ReactDOM.render(
  ,
  document.getElementById("root")
);






The sort() function here only really compares all values that are strings or numbers and parsed points to Number before comparison otherwise a string comparison would be performed yielding unexpected results. You may need to adjust that function to your needs but in essence this example shows what you need to do.

user_6433166 · Answer

Here you have a demo of the below-proposed solution. Your question seems to be a little bit confusing because you're passing a prop called sorted and, at the same time you're using lists inside the Leaderboard component. So I wasn't sure if you wanted to sort the list outside of Leaderboard or inside it (there's only one route where you actually pass the list through the Leaderboard). So I assumed you just want ideas.

From inside your Leaderboard component you can call useLocation() to get access to the pathname and make the decision based on that. Like this:

const location = useLocation();
// Turns the pathname string into an array
const splittedPathName = location.pathname.split('/');
// Gets the last item in the array to be used as the sort criteria
const path = splittedPathName.pop() ?? '';
// path === 'age', 'rank', '', etc,

Then you can sort your list before returning your actual HTML:

// we don't want to mutate the original data during the sorting
const sortedList = structuredClone(lists);
if (path) {
  // the sorting algorithm here will depend on the type of your
  // data. I'm considering it's always string
  sortedList.sort((a, b) => a[path].localeCompare(b[path]));
}

After that, you can use the sortedList instead of your lists in your returned HTML.

Performance improvement (if required)

If your list is big, sorting it can make your component to cause short freezing periods to the page, which is not a good user experience. You can work it around with the new useDeferredValue hook:

const deferredValue = useDeferredValue(path)
const sortedList = useMemo(() => {
    // we don't want to mutate the original data
    const newList = structuredClone(lists);
    if (!path) {
      return newList;
    }
    // the sorting algorithm here will depend on the type of your
    // data. I'm considering it's always string
    newList.sort((a, b) => a[path].localeCompare(b[path]));
    return newList;
  }, [lists, path]);

how to sort the data from json for the different different routes?

3 Answers

Performance improvement (if required)