按價格對外部 JS 文件中的數據進行數字排序

Question

我正在創建一個電子商務網站，並且正在從包含所有產品數組的外部 JS 文件中提取數據。

我目前有一個“排序”按鈕，想按價格（數值）對書籍進行排序。 根據選擇的類別，單擊按鈕時頁面上的書籍應從高到低和從低到高排序。

我已經使用 SQL 做到了這一點，但從來沒有這樣，任何幫助表示贊賞！

<div class="grid-x grid-padding-0">
  <div class="medium-3 cell">
    <div class="SubjectContainer">
      <div class="float-left">
        <div class="filterTitle" style="padding-left: 5px">Choose a subject</div>
        <div class="filterctn">
          <div class="optionctn">
            <input type="checkbox" name="subject" value="accounting" id="accounting">
            <label class="filterlabel" for="accounting">Accounting</label>
          </div>
          <div class="optionctn">
            <input type="checkbox" name="subject" value="agriculture" id="agriculture">
            <label class="filterlabel" for="business">Agriculture</label>
          </div>                 
        </div>
      </div>
    </div>
  </div>
</div>

<div class="filterTitle">Sort by Price<br>
  <small style="padding-top: 10px">(highest to lowest)</small> </div>
  <button class="sortBtn" onclick="sorted()">Sort</button>
</div>

數據

<script>
  AllSubjects([{
    "journalfilter": "accounting",
    "journalorder": "1",
    "journaltitle": "Accounting I",
    "journalprice": "22",
  },
  {
    "journalfilter": "accounting",
    "journalorder": "2",
    "journaltitle": "Accounting II",
    "journalprice": "12",
  },
  {
    "journalfilter": "agriculture",
    "journalorder": "3",
    "journaltitle": "Agriculture I",
    "journalprice": "40",
  },
  {
    "journalfilter": "agriculture",
    "journalorder": "4",
    "journaltitle": "Agriculture II",
    "journalprice": "25",
  },
  {
    "journalfilter": "agriculture",
    "journalorder": "5",
    "journaltitle": "Agriculture III",
    "journalprice": "16",
  },
  ]);

</script>

Answer 1

關於什么

/* Ascending */
yourArray.sort((a, b) => {
    return parseInt(a.journalprice) - parseInt(b.journalprice);
});

/* Descending */
yourArray.sort((a, b) => {
    return parseInt(b.journalprice) - parseInt(a.journalprice);
});

我建議您將價格存儲為數字，更具體地說是整數（因此將 1$ 存儲為 100），而不是字符串。