Sorting the value not working no change deducted

Question

I am trying to sort ad display my time zone array. But getting no result.

array order is:

(GMT) Monrovia, Reykjavik
(GMT-01:00) Cape Verde Islands
(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna

required order is: (GMT- first, then GMT after GMT+)

(GMT-01:00) Cape Verde Islands
(GMT) Monrovia, Reykjavik
(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna

Live Demo

code:

import { useEffect, useState } from "react";
import "./styles.css";

const array = [
  {
    defaultOrder: 40,
    label: "(GMT) Monrovia, Reykjavik",
    codeId: 1220,
    code: "GMT02",
    codeDesc: "(GMT) Monrovia, Reykjavik",
    codeQualifier: "Time_Zone_Cd"
  },

  {
    defaultOrder: 41,
    label: "(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
    codeId: 297,
    code: "CET",
    codeDesc: "(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
    codeQualifier: "Time_Zone_Cd"
  },
  {
    defaultOrder: 34,
    label: "(GMT-01:00) Cape Verde Islands",
    codeId: 1218,
    code: "CVT",
    codeDesc: "(GMT-01:00) Cape Verde Islands",
    codeQualifier: "Time_Zone_Cd"
  }
];

const SortTimezoneCompare = (data: any[]) => {
  return data.sort((a, b) => {
    var first = a.label.substring(
      a.label.indexOf("T") + 1,
      a.label.indexOf(")")
    );
    first.replace(/^"+:"+$/g, "");

    var second = b.label.substring(
      b.label.indexOf("T") + 1,
      b.label.indexOf(")")
    );
    first.replace(/^"+:"+$/g, "");

    if (parseFloat(first) < parseFloat(second)) {
      return -1;
    }
    if (parseFloat(first) > parseFloat(second)) {
      return 1;
    }
    return 0;
  });
};

export default function App() {
  const [timeZone, setTimeZone] = useState<any[] | null>(null);
  useEffect(() => {
    const sorted = SortTimezoneCompare(array);
    setTimeZone(sorted);
  }, []);
  return (
    <div className="App">
      <ul>{timeZone && timeZone.map((v) => <li>{v.label}</li>)}</ul>
    </div>
  );
}

Does this answer your question? [How can you sort an array without mutating the original array?](https://stackoverflow.com/questions/9592740/how-can-you-sort-an-array-without-mutating-the-original-array) — Konrad, Dec 27 '22 at 14:16
`Array.prototype.sort` doesn't return a new array so the state won't update, because you call `setTimeZone` with the same reference — Konrad, Dec 27 '22 at 14:16
@Konrad - actually the function which I am calling `return` a value right? how do you say it's not returns? if something is wrong can you correct me? — user2024080, Dec 27 '22 at 14:20
This line doesn't do anything `first.replace(/^"+:"+$/g, "");`. Strings are immutable and `replace` returns a new string instead. It should be `first = first.replace(/^"+:"+$/g, "");` — Konrad, Dec 27 '22 at 14:24

score 0 · Answer 1 · answered Dec 27 '22 at 14:35

Issue: The issue is if else condition is not getting trigerred because of which it was returning the default sorting that is returning 0

Solution:

Here is how you can test the condition just replace your function with this. Here I am just checking if the variable contains a negative sign or not.

const SortTimezoneCompare = (data: any[]) => {
const newdata= [...data].sort((a, b) => {
  var first = a.label.substring(
    a.label.indexOf("T") + 1,
    a.label.indexOf(")")
  );
  first.replace(/^"+:"+$/g, "");

  if(first.split("").includes("-")){
    return -1
  }
  else if(!first.split("").includes("-")){
    return 1
  }
  
  return 0;
});
return newdata
};

Yes, works. But the order is missing. https://codesandbox.io/s/wispy-frost-f9kw86?file=/src/App.tsx it should be GMT-,GMT,thenGMT+ can you please help me? — user2024080, Dec 27 '22 at 14:54
you can modify it further, the problem with your code was if else condition was not getting trigerred — Arman Kazi, Dec 27 '22 at 15:33

Sorting the value not working no change deducted

1 Answers1