How to order an array of strings alphabetically after filter?

Question

I am going through an array , in my VUE app, that has the following structure

[
{
  "id": 1,
  "brands": [
    {
      "name": "Mall",
      "id": 1
    },
    {
      "name": "Tanted",
      "id": 25
    },
    {
      "name": "Anteil",
      "id": 12
    },
    {
      "name": "Moscard",
      "id": 73
    }
  ]
},
{
  "id": 2,
  "brands": [
    {
      "name": "Yanre",
      "id": 6
    },
    {
      "name": "Alted",
      "id": 10
    },
    {
      "name": "Sillex",
      "id": 9
    },
    {
      "name": "Straf",
      "id": 78
    }
  ]
}
]

the first thing I'm doing to show the different options of the select where I show them is a filter by id

computed: {
    filteredBrand() {
      var selectedBrand =
        !this.businessInfo || this.businessInfo.selectedBrand == 0
          ? 1
          : this.businessInfo.selectedBrand;
      return !this.$store.getters.brands
        ? null
        : this.$store.getters.brands.filter(
            item => item.id == selectedBrand
          )[0].brands;
    }
}

              <select
              v-model="businessInfo.selectedBrand"
              @change="onChangeBrand($event)">
              <option v-for="brand in filteredBrand" v-bind:key="brand.name">{{ brand.name }}</option>
              </select>

up to this point I manage to show the brands corresponding to each id in the select, but I wanted to sort them also in alphabetical order and I can't find a way to combine the filter with a sort. I have tried to concatenate the methods but it returns a syntax error.

computed: {
    filteredBrand() {
      var selectedBrand =
        !this.businessInfo || this.businessInfo.selectedBrand == 0
          ? 1
          : this.businessInfo.selectedBrand;
      return !this.$store.getters.brands
        ? null
        : this.$store.getters.brands.filter(
            item => item.id == selectedBrand
          )[0].brands.sort(function(a, b) {
      return a.name === b.name ? 0 : +(a.name > b.name) || -1;
    });
    }
}

How can I do it? Thank you all for your time and help in advance

"but it returns a syntax error" Please always include a copy-and-paste of the actual complete error message, and tell us what line it's complaining about. I don't see any syntax error in the sort code you've shown. (I wouldn't use that code, but I don't see a syntax error in it.) — T.J. Crowder
– T.J. Crowder, Commented Oct 7, 2020 at 8:45

T.J. Crowder · Accepted Answer · 2020-10-08 09:50:48Z

3

To compare two strings lexicographically (loosely, alphabetically) in ascending order (A-Z), you do this in the sort callback:

return a.name.localeCompare(b.name);

For descending order (Z-A), use

return b.name.localeCompare(a.name);

Side note: Any time you find yourself writing array.filter(/*...*/)[0], write array.find(/*...*/) instead. (Polyfilling find if you need IE support.) The find method stops when it finds the first matching entry and returns that entry, instead of going through the entire array building a new array from all matching entries. You don't need to go through the entire array and build a new one if you're just going to grab the first entry. :-)

So combining that with the main answer above:

  return !this.$store.getters.brands
    ? null
    : this.$store.getters.brands.find(
        item => item.id == selectedBrand
      ).brands.sort((a, b) => a.name.localeCompare(b.name));

edited Oct 8, 2020 at 9:50

answered Oct 7, 2020 at 8:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

homerThinking Over a year ago

Thank you very much for the answer and for the perfect explanation. Understood and I hope I don't make the same mistake again! Have a nice day

homerThinking Over a year ago

just a comment, IE Error in render: "TypeError: Object doesn't support property or method 'find'"

T.J. Crowder Over a year ago

@javascript110899 - If you need to support IE, you'll need to polyfill Array.prototype.find, see the linked MDN page.

homerThinking Over a year ago

I've just added the following script to make it work in all browsers <script src="cdn.polyfill.io/v3/…>. Thank you

Collectives™ on Stack Overflow

How to order an array of strings alphabetically after filter?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related