sort behaviour when return 0

In this example below you will see how to do a sort behaviour when return 0 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by maple-leaf, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright maple-leaf ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>sort behaviour when return 0</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="old"></div>
<div id="wrong"></div>
<div id="correct"></div>

<p>answer: https://stackoverflow.com/questions/3026281/array-sort-sorting-stability-in-different-browsers</p>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/maple-leaf/sort-behaviour-when-return-0-qxOBEw */
#wrong {
  background: goldenrod;
  margin-top: 10px;
}

#correct {
  background: green;
  margin-top: 10px;
}


/*Downloaded from https://www.codeseek.co/maple-leaf/sort-behaviour-when-return-0-qxOBEw */
var arr = [
  {
    "price": 0,
    "name": "SourceHanSansSC-Normal"
  },
  {
    "price": 0,
    "name": "SentySnowMountain"
  },
  {
    "price": 0,
    "name": "华康仿宋体W3-A"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Light"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Heavy"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-ExtraLight"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Bold"
  },
  {
    "price": 0,
    "name": "MFShangYa-Regular"
  },
  {
    "price": 0,
    "name": "SentyZHAO"
  },
  {
    "price": 0,
    "name": "SentyWEN-SP-TR"
  },
  {
    "price": 0,
    "name": "SentyTEA"
  },
  {
    "price": 0,
    "name": "SentyPea"
  },
  {
    "price": 0,
    "name": "HelveticaNeueLtProbd"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Ltalic"
  },
  {
    "price": 0,
    "name": "SentyPaperCut"
  },
  {
    "price": 0,
    "name": "SentyCreamPuff"
  },
  {
    "price": 0,
    "name": "SentyChalkOriginal"
  },
  {
    "price": 0,
    "name": "SentyCHALK"
  },
  {
    "price": 0,
    "name": "SunYatsenHsingshu-"
  },
  {
    "price": 0,
    "name": "QingYuan"
  },
  {
    "price": 0,
    "name": "MiaoXiaoJieJ"
  },
  {
    "price": 0,
    "name": "MYoyoPRC-Medium"
  },
  {
    "price": 0,
    "name": "华康宋体W12"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Headline_0"
  },
  {
    "price": 0,
    "name": "Arial-BoldItalicMT"
  },
  {
    "price": 0,
    "name": "SentyGoldenBell"
  },
  {
    "price": 0,
    "name": "ArialNarrow"
  },
  {
    "price": 0,
    "name": "Didot-Htf-l11-Light"
  },
  {
    "price": 0,
    "name": "Didot-Bold"
  },
  {
    "price": 0,
    "name": "PingFang SC Regular"
  },
  {
    "price": 0,
    "name": "Neutraface2Display-Bold"
  },
  {
    "price": 0,
    "name": "Acrom-Medium"
  },
  {
    "price": 0,
    "name": "Arial-Black"
  },
  {
    "price": 0,
    "name": "ArialNarrow-Italic"
  },
  {
    "price": 0,
    "name": "ArialNarrow-BoldItalic"
  },
  {
    "price": 0,
    "name": "ArialNarrow-Bold"
  },
  {
    "price": 0,
    "name": "Didot"
  },
  {
    "price": 0,
    "name": "HelveticaNeueProRoman"
  },
  {
    "price": 0,
    "name": "Arial-ItalicMT"
  },
  {
    "price": 0,
    "name": "Arial-BoldMT"
  },
  {
    "price": 0,
    "name": "ArialMT"
  },
  {
    "price": 0,
    "name": "Arial-BlackItalic"
  },
  {
    "price": 0,
    "name": "Impact"
  },
  {
    "price": 0,
    "name": "BigruixianBlackGBV1.0"
  },
  {
    "price": 0,
    "name": "IntroCondBlackFree"
  },
  {
    "price": 0,
    "name": "Didot-HTF-L11-Light"
  },
  {
    "price": 0,
    "name": "TimesNewRoman"
  },
  {
    "price": 0,
    "name": "Sniglet Regular"
  },
  {
    "price": 0,
    "name": "Huakang Heiti W5-A"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Medium"
  },
  {
    "price": 0,
    "name": "BearHand"
  },
  {
    "price": 0,
    "name": "MStiffHei PRC"
  },
  {
    "price": 0,
    "name": "371-CAI978"
  },
  {
    "price": 0,
    "name": "941-CAI978"
  },
  {
    "price": 0,
    "name": "692-CAI978"
  },
  {
    "price": 0,
    "name": "DFPSongW9"
  },
  {
    "price": 0,
    "name": "DFPWaWaW5"
  },
  {
    "price": 0,
    "name": "948-CAI978"
  },
  {
    "price": 0,
    "name": "DFBuDingW12-GB"
  },
  {
    "price": 0,
    "name": "Black Jack"
  },
  {
    "price": 0,
    "name": "HYXiaoMaiTiJ"
  },
  {
    "price": 0,
    "name": "DFCaiDaiW7-GB"
  },
  {
    "price": 0,
    "name": "440-CAI978"
  },
  {
    "price": 0,
    "name": "HYCuYuanJ"
  },
  {
    "price": 0,
    "name": "812-CAI978"
  },
  {
    "price": 0,
    "name": "800-CAI978"
  },
  {
    "price": 0,
    "name": "452-CAI978"
  },
  {
    "price": 0,
    "name": "DFPLongMenW9"
  },
  {
    "price": 0,
    "name": "LoveloBlack"
  },
  {
    "price": 0,
    "name": "800-CAI978"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPS-ItalicMT"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPS-BoldItalicMT"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPS-BoldMT"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPSMT"
  },
  {
    "price": 0,
    "name": "MFLiHei-Regular"
  },
  {
    "price": 0,
    "name": "Didot Bold"
  },
  {
    "price": 0,
    "name": "FrLtDFGirl"
  },
  {
    "price": 0,
    "name": "经典超圆简 Regular"
  },
  {
    "price": 0,
    "name": "DFPOP3W12-GB"
  },
  {
    "price": 0,
    "name": "HYXiaoMaiTiJ"
  },
  {
    "price": 0,
    "name": "444-CAI978"
  },
  {
    "price": 0,
    "name": "DFYaSongW9-GB"
  },
  {
    "price": 0,
    "name": "DFPLongMenW9-GB"
  },
  {
    "price": 0,
    "name": "DFPLongMenW9"
  },
  {
    "price": 0,
    "name": "DFKaiW5-A"
  },
  {
    "price": 0,
    "name": "DFPHaiBaoW12-GB"
  },
  {
    "price": 0,
    "name": "MFJunYa-Regular"
  },
  {
    "price": 0,
    "name": "DFPYaYiW6-GB"
  },
  {
    "price": 0,
    "name": "Didot-HTF-M96-Medium-Ital"
  },
  {
    "price": 0,
    "name": "DFGirl"
  },
  {
    "price": 0,
    "name": "Didot-HTF-L24-Light-Ital"
  },
  {
    "price": 0,
    "name": "Didot-HTF-L11-Light"
  },
  {
    "price": 0,
    "name": "Didot-HTF-B64-Bold-Ital"
  },
  {
    "price": 0,
    "name": "Didot"
  },
  {
    "price": 0,
    "name": "Didot-Italic"
  },
  {
    "price": 0,
    "name": "Didot-Bold"
  },
  {
    "price": 0,
    "name": "DFPHannotateW5-GB"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Roman"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Bold_0"
  },
  {
    "price": 0,
    "name": "Didot-Italic"
  }
];

var arr2 = [
  {
    "price": 0,
    "name": "SourceHanSansSC-Normal"
  },
  {
    "price": 0,
    "name": "SentySnowMountain"
  },
  {
    "price": 0,
    "name": "华康仿宋体W3-A"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Light"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Heavy"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-ExtraLight"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Bold"
  },
  {
    "price": 0,
    "name": "MFShangYa-Regular"
  },
  {
    "price": 0,
    "name": "SentyZHAO"
  },
  {
    "price": 0,
    "name": "SentyWEN-SP-TR"
  },
  {
    "price": 0,
    "name": "SentyTEA"
  },
  {
    "price": 0,
    "name": "SentyPea"
  },
  {
    "price": 0,
    "name": "HelveticaNeueLtProbd"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Ltalic"
  },
  {
    "price": 0,
    "name": "SentyPaperCut"
  },
  {
    "price": 0,
    "name": "SentyCreamPuff"
  },
  {
    "price": 0,
    "name": "SentyChalkOriginal"
  },
  {
    "price": 0,
    "name": "SentyCHALK"
  },
  {
    "price": 0,
    "name": "SunYatsenHsingshu-"
  },
  {
    "price": 0,
    "name": "QingYuan"
  },
  {
    "price": 0,
    "name": "MiaoXiaoJieJ"
  },
  {
    "price": 0,
    "name": "MYoyoPRC-Medium"
  },
  {
    "price": 0,
    "name": "华康宋体W12"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Headline_0"
  },
  {
    "price": 0,
    "name": "Arial-BoldItalicMT"
  },
  {
    "price": 0,
    "name": "SentyGoldenBell"
  },
  {
    "price": 0,
    "name": "ArialNarrow"
  },
  {
    "price": 0,
    "name": "Didot-Htf-l11-Light"
  },
  {
    "price": 0,
    "name": "Didot-Bold"
  },
  {
    "price": 0,
    "name": "PingFang SC Regular"
  },
  {
    "price": 0,
    "name": "Neutraface2Display-Bold"
  },
  {
    "price": 0,
    "name": "Acrom-Medium"
  },
  {
    "price": 0,
    "name": "Arial-Black"
  },
  {
    "price": 0,
    "name": "ArialNarrow-Italic"
  },
  {
    "price": 0,
    "name": "ArialNarrow-BoldItalic"
  },
  {
    "price": 0,
    "name": "ArialNarrow-Bold"
  },
  {
    "price": 0,
    "name": "Didot"
  },
  {
    "price": 0,
    "name": "HelveticaNeueProRoman"
  },
  {
    "price": 0,
    "name": "Arial-ItalicMT"
  },
  {
    "price": 0,
    "name": "Arial-BoldMT"
  },
  {
    "price": 0,
    "name": "ArialMT"
  },
  {
    "price": 0,
    "name": "Arial-BlackItalic"
  },
  {
    "price": 0,
    "name": "Impact"
  },
  {
    "price": 0,
    "name": "BigruixianBlackGBV1.0"
  },
  {
    "price": 0,
    "name": "IntroCondBlackFree"
  },
  {
    "price": 0,
    "name": "Didot-HTF-L11-Light"
  },
  {
    "price": 0,
    "name": "TimesNewRoman"
  },
  {
    "price": 0,
    "name": "Sniglet Regular"
  },
  {
    "price": 0,
    "name": "Huakang Heiti W5-A"
  },
  {
    "price": 0,
    "name": "SourceHanSansSC-Medium"
  },
  {
    "price": 0,
    "name": "BearHand"
  },
  {
    "price": 0,
    "name": "MStiffHei PRC"
  },
  {
    "price": 0,
    "name": "371-CAI978"
  },
  {
    "price": 0,
    "name": "941-CAI978"
  },
  {
    "price": 0,
    "name": "692-CAI978"
  },
  {
    "price": 0,
    "name": "DFPSongW9"
  },
  {
    "price": 0,
    "name": "DFPWaWaW5"
  },
  {
    "price": 0,
    "name": "948-CAI978"
  },
  {
    "price": 0,
    "name": "DFBuDingW12-GB"
  },
  {
    "price": 0,
    "name": "Black Jack"
  },
  {
    "price": 0,
    "name": "HYXiaoMaiTiJ"
  },
  {
    "price": 0,
    "name": "DFCaiDaiW7-GB"
  },
  {
    "price": 0,
    "name": "440-CAI978"
  },
  {
    "price": 0,
    "name": "HYCuYuanJ"
  },
  {
    "price": 0,
    "name": "812-CAI978"
  },
  {
    "price": 0,
    "name": "800-CAI978"
  },
  {
    "price": 0,
    "name": "452-CAI978"
  },
  {
    "price": 0,
    "name": "DFPLongMenW9"
  },
  {
    "price": 0,
    "name": "LoveloBlack"
  },
  {
    "price": 0,
    "name": "800-CAI978"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPS-ItalicMT"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPS-BoldItalicMT"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPS-BoldMT"
  },
  {
    "price": 0,
    "name": "TimesNewRomanPSMT"
  },
  {
    "price": 0,
    "name": "MFLiHei-Regular"
  },
  {
    "price": 0,
    "name": "Didot Bold"
  },
  {
    "price": 0,
    "name": "FrLtDFGirl"
  },
  {
    "price": 0,
    "name": "经典超圆简 Regular"
  },
  {
    "price": 0,
    "name": "DFPOP3W12-GB"
  },
  {
    "price": 0,
    "name": "HYXiaoMaiTiJ"
  },
  {
    "price": 0,
    "name": "444-CAI978"
  },
  {
    "price": 0,
    "name": "DFYaSongW9-GB"
  },
  {
    "price": 0,
    "name": "DFPLongMenW9-GB"
  },
  {
    "price": 0,
    "name": "DFPLongMenW9"
  },
  {
    "price": 0,
    "name": "DFKaiW5-A"
  },
  {
    "price": 0,
    "name": "DFPHaiBaoW12-GB"
  },
  {
    "price": 0,
    "name": "MFJunYa-Regular"
  },
  {
    "price": 0,
    "name": "DFPYaYiW6-GB"
  },
  {
    "price": 0,
    "name": "Didot-HTF-M96-Medium-Ital"
  },
  {
    "price": 0,
    "name": "DFGirl"
  },
  {
    "price": 0,
    "name": "Didot-HTF-L24-Light-Ital"
  },
  {
    "price": 0,
    "name": "Didot-HTF-L11-Light"
  },
  {
    "price": 0,
    "name": "Didot-HTF-B64-Bold-Ital"
  },
  {
    "price": 0,
    "name": "Didot"
  },
  {
    "price": 0,
    "name": "Didot-Italic"
  },
  {
    "price": 0,
    "name": "Didot-Bold"
  },
  {
    "price": 0,
    "name": "DFPHannotateW5-GB"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Roman"
  },
  {
    "price": 0,
    "name": "DidotLTStd-Bold_0"
  },
  {
    "price": 0,
    "name": "Didot-Italic"
  }
];

old.textContent = arr.map(x => x.name);
wrong.textContent = arr.sort((a,b) => a.price - b.price).map(x => x.name);
correct.textContent = arr2
  .map((x,index) => {
  return {
    ...x,
    index
  }
  })
  .sort((a,b) => {
    const diff = a.price - b.price;
    if (diff === 0) {
      return a.index - b.index;
    }
    return diff;
  }).map(x => x.name);

Comments