0

So I working on an assignment that requires me to sort an array of objects in ascending order by using the values in React JS . I have done most of the it but I am stuck in the part where if the values of 2 objects are same then look at the other values. How do I go on about it ?

I have done some changes but the another error has occured.

enter image description here

import React from "react";
import { response } from "../response";
import { useHistory } from "react-router-dom";

function compare(a, b) {
    if (ob1.age > ob2.age) {
    return 1;
  } else if (ob1.age < ob2.age) {
    return -1;
  }

  // Else go to the 2nd item
  if (ob1.rank < ob2.rank) {
    return 1;
  } else if (ob1.rank > ob2.rank) {
    return -1;
  } else {
    // nothing to split them
    return 0;
  }
}

function Age(props) {
  const data = response.list;
  //   const { rank, name, points, age } = response.list[index];

  const result = data.sort(compare);

  const history = useHistory();
  const routeChange = (value) => {
    console.log(value);
    history.push(value);
  };

  return (
    <div className="text-center mt-50">
      <div className="card mx-auto pb-20 mb-30" style={{ width: "50%" }}>
        <table className="mt-50" data-testid="app-table">
          <thead>
            <tr>
              <th>Rank</th>
              <th>Name</th>
              <th className="numeric">Points</th>
              <th className="numeric">Age</th>
            </tr>
          </thead>
          <tbody data-testid="app-tbody">
            {result.map((person, index) => {
              return (
                <tr key={person.rank}>
                  <td data-testid={`rank-${index}`}>{person.rank}</td>
                  <td data-testid={`name-${index}`}>{person.name}</td>
                  <td data-testid={`points-${index}`} className="numeric">
                    {person.points}
                  </td>
                  <td data-testid={`age-${index}`} className="numeric">
                    {person.age}
                  </td>
                </tr>
              );
            })}
            {/* <tr key={rank}>
              <td data-testid={`rank-${index}`}>{rank}</td>
              <td data-testid={`name-${index}`}>{name}</td>
              <td data-testid={`points-${index}`} className="numeric">
                {points}
              </td>
              <td data-testid={`age-${index}`} className="numeric">
                {age}
              </td>
            </tr> */}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default Age;

enter image description here

The 1 should be above 14

vishaalvarshan
  • 11
  • 4

1 Answers1

0

For Default sorting use this Funtion

const sortFunction = (a,b) => {
  return b.age - a.age; // for descending a.age - b.age
}

For rendering data.sort(sortFunction).map

Patrick Preston
  • 77
  • 8
  • It's not supposed to be sorted in descending order . I just want use the second value in the object incase the first value is equal to the other . – vishaalvarshan May 20 '22 at 16:19