Vue sorting numbers

Question

I have vue data:

data: {
          offices: requestData,
          selectedFloors: [
            "3",
            "4",
            "5",
            "10",
            "11",
            "12",
          ],
          minJobAngle: 0,
          maxJobAngle: 80,
          minAreaAngle: 0,
          maxAreaAngle: 900
        }

And I need to use selected floors for filtering table rows. Filtering works fine but the order of selected floors in the filter is 10, 11, 12, 3, 4, 5

I have this function in my methods

getFilteredOffices() {
            const areaMin = this.sliderAreaMin;
            const areaMax = this.sliderAreaMax;
            const jobsMin = this.sliderJobMin;
            const jobsMax = this.sliderJobMax;
            const floors = this.selectedFloors;
            return this.offices.filter(function (item) {

              if (item.acf.suurus < areaMin || item.acf.suurus > areaMax) {
                return false;
              }
              if (item.acf.tookohad < jobsMin || item.acf.tookohad > jobsMax) {
                return false;
              }
              if (!floors.includes(item.acf.floor)) {
                return false;
              }
              return true;
            });
          }

This under computed

    getAvailableFloors() {
            const set = new Set();

            const sorted = this.offices.sort((a, b) => {
              if (a.acf.floor > b.acf.floor) {
                return 1;
              }
              if (a.acf.floor < b.acf.floor) {
                return -1;
              }
              return 0;
            });

            sorted.forEach((office) => {
              set.add(office.acf.floor);
            });

            return set;
          },

And this is my html

<label :class="['checkbox-label floor' + item]" v-for="item in this.getAvailableFloors">
   <input type="checkbox" name="floor" :value="item" v-model="selectedFloors"> @{{ item }}
   <span class="checkmark"></span>
</label>

Any idea what I am missing and how I get these floors displayed like this 3,4,5,10,11,12?

`this.offices.sort((a, b) => a.acf.floor - b.acf.floor)` – adiga Nov 12 '21 at 09:20 — adiga, Nov 12 '21 at 09:20

Nikolay Babanov · Answer 1 · 2021-11-12T09:19:04.573

You would need to cast your floors to numbers using Number('3') for example. This will make the comparisons between numbers and not between strings.

When you are comparing strings you will get alphabetical soring (lexicographic ordering) in which for example 10 < 2.

Here is the fixed sort function:

 const sorted = this.offices.sort((a, b) => {
      const floorA = Number(a.acf.floor);
      const floorB = Number(b.acf.floor);
          
      if (floorA > floorB) {
           return 1;
      }
      
      if (floorA < floorB) {
          return -1;
      }

      return 0;
 });

To read more about type casting see here: https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion

score 0 · Accepted Answer · answered Nov 12 '21 at 09:14

You are comparing strings instead of numbers. String 10, 11, 12 are lower than 2 or 3. Use parseInt to convert the string before comparing.

getAvailableFloors() {
  const set = new Set();

  const sorted = this.offices.sort((a, b) => {
    if (parseInt(a.acf.floor) > parseInt(b.acf.floor)) {
      return 1;
    }
    if (parseInt(a.acf.floor) < parseInt(b.acf.floor)) {
      return -1;
    }
    return 0;
  });

  sorted.forEach((office) => {
    set.add(office.acf.floor);
  });

  return set;
},

Vue sorting numbers

2 Answers2