Sort numbers using Vue

Question

I have vue data:

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

I need to filter table rows using selected floors. Filtering is working fine but the order of selected floors in filter is 10, 11, 12, 3, 4, 5

I have this function in my method

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 calculation is insufficient

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;
          },

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'm missing and how to display these floors as 3, 4, 5, 10, 11%

Answer 1

For example, you need to use Number('3') to convert the floor to a number. This will compare between numbers, not strings.

When you compare strings, you get alphabetical ordering (lexicographic order), e.g. 10 < 2.

This is the fixed sorting 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 learn about type conversion

Answer 2

You are comparing strings not numbers. The strings 10, 11, 12 are lower than 2 or 3. Use parseInt to convert strings 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;
},