Javascript React sorting complex array

Question

I'm trying to sort a complex array. This array is grabbed with GraphQL from my headless CMS as follows:

query MyQuery {
    teams {
        id
        name
        match {
            teams {
                name
            }
            homePoints
            awayPoints
            date
            trophy
        }
    }
}

Now I'm mapping through all the teams and calculated the total points of a team (depending whether a team is playing home or away) with the following:

<Tbody>
    {!fetching && data.teams.map((team, i) => {
        const points = team.match.map(match => match.teams[0].name === team.name ? match.homePoints : match.awayPoints).reduce((a, b) => a + b, 0)

        return (
            <Tr key={team.id}>
                <Td>{i + 1}</Td>
                <Td>{team.name}</Td>
                <Td>{points}</Td>
            </Tr>
        )
    })}
</Tbody>

The result is displayed well within a table, except the following: it is not sorted. The team with the highest amount of points should be on the top of the table. How to solve this?

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…? — Andy
– Andy, Commented Nov 8, 2021 at 13:21
Have you tried using the sort function? Sort array of objects by string property value — Heretic Monkey
– Heretic Monkey, Commented Nov 8, 2021 at 13:21
I did but i'm not exactly sure how to use it within this usecase. As said, the total points are calculated during mapping and therefore I'm not able to sort the entire dataset upfront. — Max
– Max, Commented Nov 8, 2021 at 13:26

Jkarttunen · Accepted Answer · 2021-11-08 13:33:29Z

1

For a clean code, create a few helper functions before the render / return part. It should looks something like this:

// Util functions outside component
const withPoints = (team, i) => {
   const points = team.match.map(match => 
       match.teams[0].name === team.name ? match.homePoints : 
       match.awayPoints).reduce((a, b) => a + b, 0)
   return {team, points}
};

const byPoints = (a, b) => b.points - a.points

// My component
const MyComponent = ({fetching, data}) => {

// temporary assignment in component body to make the JSX part cleaner
const teams = fetching ? 
    data.teams
      .map(withPoints)
      .sort(byPoints)
    : null

return <Tbody>
             {teams && teams.map((t, i) => (
                    <Tr key={t.team.id}>
                        <Td>{i + 1}</Td>
                        <Td>{t.team.name}</Td>
                        <Td>{t.points}</Td>
                    </Tr>
                ))}
      </Tbody>
}

answered Nov 8, 2021 at 13:33

Jkarttunen

7,6914 gold badges30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

This one was really helpful! Thank you very much.

windmaomao · Accepted Answer · 2021-11-08 13:27:42Z

Oh i see, you basically want to sort the array. However you didn't prepare the array ahead of the time, that's the trouble you get yourself into.

To resolve this, let's prepare the array first.


  // this the the teams with points
  // you did good job of processing it
  let teams = data.teams.map(...)

  // sort the array
  // please test the sorting order
  teams.sort(function(a, b) {
    return Math.sign(b.point - a.point)
  })

  // this is the place for render
  return (
    <Tbody>
      {teams.map(team => (
        <Tr key={team.id}>
          ...
        </Tr>
      )}
    <Tbody>
  )

A general good practice is that, don't bring any logic code into the render layer. In React, it's about the line of the return, if you can put most of the logic above that line, it'll help you refactor your render later on.

Collectives™ on Stack Overflow

Javascript React sorting complex array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related