How do I implement sorting on a integer column?

Question

const customerList = [{"ID":1,"name":"Queen","email":"Queen@gmail.com","counts_of_visit":13,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":2,"name":"Jack","email":"Jack@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-30T02:08:23.000Z","contacted":"Yes"},{"ID":3,"name":"Nolan","email":"Nolan@gmail.com","counts_of_visit":6,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":4,"name":"Janet","email":"Janet@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":5,"name":"Loris","email":"Loris@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":6,"name":"Bree","email":"Bree@gmail.com","counts_of_visit":3,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":7,"name":"Daphne","email":"Daphne@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-15T09:08:23.000Z","contacted":"Yes"},{"ID":8,"name":"Bari","email":"Bari@gmail.com","counts_of_visit":4,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":9,"name":"Billy","email":"Billy@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":10,"name":"Belia","email":"Belia@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":11,"name":"Moses","email":"Moses@gmail.com","counts_of_visit":9,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":12,"name":"Alex","email":"Alex@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-02-10T01:08:23.000Z","contacted":"Yes"},{"ID":13,"name":"Alix","email":"Alix@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":14,"name":"Wendell","email":"Wendell@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":15,"name":"Ceola","email":"Ceola@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"}]

  <th class="countheader" onClick={() => sortCountCustomer}>
    Counts of Visit {getCountArrow()}
  </th>

  const [counterCount, setcounterCount] = useState(0);

  function sortCountCustomer() {
    const sortedCountCustomer = [...customerList];
    let sortCountVisit = counterCount;
        
    //check the current sortCount, if it is 2 then go back to 1,
    //if not then increase by 1

    if (sortCountVisit === 2) {
      sortCountVisit = 1;
      setCounterCount(1);
    } else {
      sortCountVisit += 1;
      setCounterCount(sortCountVisit);
    }

    console.log(sortCountVisit);
    
    if (sortCountVisit < 3) {
      sortedCountCustomer.sort(function (x, y) {
        if (sortCountVisit === 1) {
          return x.counts_of_visit < y.counts_of_visit ? 0 : x.counts_of_visit ? -1 : 1;
        } else if (sortCountVisit === 2) {
          return x.counts_of_visit > y.counts_of_visit ? 0 : x.counts_of_visit ? 1 : -1;
        }
      });
      setCustomerList(sortedCountCustomer);
    }
  }

My function does not work when sorting the integer number from ascending and descending although I called the function to sort onClick method when I click the header

I edited my code to show where customerList and countercount come from

Please provide a [mcve]. There is HTML code in JavaScript code. That doesn't make sense. — , Jun 07 '21 at 09:58
@jabaa could you then post an answer on how im going to sort this integer column? — max, Jun 07 '21 at 10:01
No, I can't. I can't reproduce your problem. I suggest to remove React and Axios from this question. Add an example input and expected output. Create an interactive in your question. — , Jun 07 '21 at 10:02
Now you can provide a [mcve] without React and Axios and with example input and expected output. — , Jun 07 '21 at 10:03
Add actual values for `customerList`, `setCustomerList` and the other variables. You're asking for debugging help but you're not providing a code that can be debugged. Create a code that reproduces your problem and that doesn't require external data. — , Jun 07 '21 at 10:07
Regarding: `onClick={() => sortCountCustomer}` I think this should either be `onClick={() => sortCountCustomer()}` or `onClick={sortCountCustomer}` — Ben Stephens, Jun 07 '21 at 10:13
@BenStephens yes that aside the sorting logic doesn't. work return x.counts_of_visit < y.counts_of_visit ? 0 : x.counts_of_visit ? -1 : 1; } else if (sortCountVisit === 2) { return x.counts_of_visit > y.counts_of_visit ? 0 : x.counts_of_visit ? 1 : -1; } — max, Jun 07 '21 at 10:16
It's probably bothering you that I repeat it again: please provide a [mcve]. You're current code snippet can't be debugged. You can either remove React or you could create an example with Stackblitz. — , Jun 07 '21 at 10:19
@jabaa https://stackblitz.com/edit/react-ht5usz sort this numbers — max, Jun 07 '21 at 10:20
I don't understand the question. Sorting works in your example. — , Jun 07 '21 at 10:47

Ben Stephens · Answer 1 · 2021-06-07T15:44:52.610

Does this help:

const base_customerList = [{"ID":1,"name":"Queen","email":"Queen@gmail.com","counts_of_visit":13,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":2,"name":"Jack","email":"Jack@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-30T02:08:23.000Z","contacted":"Yes"},{"ID":3,"name":"Nolan","email":"Nolan@gmail.com","counts_of_visit":6,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":4,"name":"Janet","email":"Janet@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":5,"name":"Loris","email":"Loris@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":6,"name":"Bree","email":"Bree@gmail.com","counts_of_visit":3,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":7,"name":"Daphne","email":"Daphne@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-15T09:08:23.000Z","contacted":"Yes"},{"ID":8,"name":"Bari","email":"Bari@gmail.com","counts_of_visit":4,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":9,"name":"Billy","email":"Billy@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":10,"name":"Belia","email":"Belia@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":11,"name":"Moses","email":"Moses@gmail.com","counts_of_visit":9,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":12,"name":"Alex","email":"Alex@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-02-10T01:08:23.000Z","contacted":"Yes"},{"ID":13,"name":"Alix","email":"Alix@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":14,"name":"Wendell","email":"Wendell@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":15,"name":"Ceola","email":"Ceola@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"}];


const Table = () => {
  const [counterCount, setCounterCount] = React.useState(3);
  const [customerList, setCustomerList] = React.useState(base_customerList);
  
  function sortCountCustomer() {
    const sortedCountCustomer = [...base_customerList];
    let sortCountVisit = counterCount;

    if (sortCountVisit === 3) {
      sortCountVisit = 1;
      setCounterCount(1);
    } else {
      sortCountVisit += 1;
      setCounterCount(sortCountVisit);
    }

    if (sortCountVisit < 3)
      sortedCountCustomer.sort(function (x, y) {
        if (sortCountVisit === 1) {
          return x.counts_of_visit - y.counts_of_visit;
        } else if (sortCountVisit === 2) {
          return y.counts_of_visit - x.counts_of_visit;
        }
      });
    
    setCustomerList(sortedCountCustomer);
  }
  
  return (<table>
    <thead>
      <tr>
        <th>Name</th>
        <th onClick={() => sortCountCustomer()}>
          Counts of Visit
        </th>
      </tr>
    </thead>
    <tbody>
      {customerList.map((c) => (
        <tr key={c.ID}>
          <td>{ c.name }</td>
          <td>{ c.counts_of_visit }</td>
        </tr>
      ))}
    </tbody>
  </table>);
};

const App = () => <Table />;
ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

can explain this part return (x.counts_of_visit - y.counts_of_visit) * (sortCountVisit === 2 ? 1 : -1); What do the numbers negative and positive mean — max, Jun 07 '21 at 10:29
@max It allows the sort order to be reversed. `x.counts_of_visit - y.counts_of_visit` gives you a positive or negative integer (or zero); if sortCountVisit !== 2 then the sort order is reversed by multiplying that positive or negative integer by -1. — Ben Stephens, Jun 07 '21 at 10:32
``` sortedCountCustomer.sort(function (x, y) { if (sortCountVisit === 1) { return x.counts_of_visit - y.counts_of_visit ? 0 : x.counts_of_visit ? -1 : 1; } else if (sortCountVisit === 2) { return y.counts_of_visit - x.counts_of_visit ? 0 : x.counts_of_visit ? 1 : -1; } ``` I would like to use this can? — max, Jun 07 '21 at 10:34
@max To be honest I'm not 100% sure what that piece of code is supposed to be doing. Hmmm ... Maybe you could try `if (sortCountVisit === 1) { return x.counts_of_visit - y.counts_of_visit; } else if (sortCountVisit === 2) { return y.counts_of_visit - x.counts_of_visit; }` (Possibly the other way around.) — Ben Stephens, Jun 07 '21 at 10:37
hi Ive tried it and it doesn't, even the preliminary sort doesn't work on running code snippet — max, Jun 07 '21 at 14:27
@max to start with it comes out as "Queen 13 Jack 2 Nolan 6 etc." (i.e. unsorted) after one click it comes out as sorted ascending, after two it's sorted descending and after another click it's back to "Queen 13 Jack 2 Nolan 6 etc.". How is that not what you're asking for? — Ben Stephens, Jun 07 '21 at 15:23
@max it looks like it wasn't working in Chrome for some reason (but was working in Firefox). The current version appears to work in Chrome (for me anyway). — Ben Stephens, Jun 07 '21 at 15:46
Can you explain why return x.counts_of_visit - y.counts_of_visit; works and the reverse works? like why you take x - y and y -x for the other case? — max, Jun 08 '21 at 02:44
could you explain xplain why return x.counts_of_visit - y.counts_of_visit; works and the reverse works? like why you take x - y and y -x for the other case? — max, Jun 09 '21 at 02:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233530/discussion-between-max-and-ben-stephens). — max, Jun 09 '21 at 02:47
@max Does this help: https://stackoverflow.com/a/64007304/14454939 ? — Ben Stephens, Jun 09 '21 at 07:04

How do I implement sorting on a integer column?

1 Answers1