vue.js - VueJs - Problem with alphabetic sorting in ArrayList

Question

I start with VueJs and I encountrer a problem with alphabetic sorting in ArrayList.

I would like alphabetic sorting my cards with name artist.

I searched informations about this but I don't find answer my problematic.

Can you oriente me ? I'm lock.

This is my code :

HTML

<div class="container-fluid d-flex flex-wrap">
      <div
        class="card_prog col-md-6 col-xl-4"
        v-for="(card, index) in filteredCategory"
        :key="index"
      >
        <div class="card_title">
          <h3>{{ card.artist }}</h3>
          <span> {{ card.stage }} / {{ card.day }} / {{ card.hour }} </span>
        </div>
        <div class="container_img">
          <img class="card_img" :src="card.img" />
        </div>
      </div>
    </div>
  </div>

JS

let types = [
  "rap",
  "rock",
  "metal",
  "pop",
  "electro",
  "folk",
  "jazz",
  "alternatif",
];
let artist = [
  "Booba",
  "Vald",
  "Petit Biscuit",
  "Marlin Manson",
  "Céline Dion",
  "Jean Schultheis",
  "Psy",
  "Cardi B",
  "Scorpion",
  "Fatal Bazooka",
  "Tragédie",
  "Keen v",
];
let stage = ["Scène A", "Scène B", "Scène C"];
let hour = ["18h", "19h", "20h", "21h", "22h", "23h", "00h", "01h00"];
let day = ["Vendredi", "Samedi", "Dimanche"];
const cardsData = [
  {
    artist: artist[2],
    type: types[0],
    img:
      "https://media.virginradio.fr/article-4260166-head-f8/petit-biscuit.jpg",
    stage: stage[0],
    day: day[2],
    hour: hour[4],
  },
  {
    artist: artist[0],
    type: types[1],
    img:
      "https://www.parisladefense-arena.com/uploads/2018/10/3764-booba-orig-2.jpg",
    stage: stage[1],
    day: day[0],
    hour: hour[5],
  },
  {
    artist: artist[1],
    type: types[2],
    img:
      "https://cdn.radiofrance.fr/s3/cruiser-production/2019/04/05e9523a-428f-4798-ad07-c4abcc70acfa/801x410_vald_album_2019.jpg",
    stage: stage[2],
    day: day[1],
    hour: hour[5],
  },
  {
    artist: artist[5],
    type: types[0],
    img:
      "https://static1.purepeople.com/articles/6/30/54/86/@/4322687-semi-exclusif-jean-schultheis-vendre-950x0-1.jpg",
    stage: stage[0],
    day: day[1],
    hour: hour[6],
  },
];

**VUE JS **

export default {
  data() {
    return {
      cards: cardsData,
      types: types,
      days: day,
      hours: hour,
      stages: stage,
      selectedType: "All",
    };
  },
  computed: {
    filteredCategory: function () {
      let self = this;
      let cardsArray = self.cards;
      let selectedType = self.selectedType;
      if (selectedType === "All") {
        return cardsArray
      } else {
        cardsArray = cardsArray.filter(function (card) {
          if (
            card.type.indexOf(selectedType) !== -1 ||
            card.day.indexOf(selectedType) !== -1 ||
            card.hour.indexOf(selectedType) !== -1 ||
            card.stage.indexOf(selectedType) !== -1
          ) {
            return card;
          }
        });
      }
      return cardsArray;
    },
  },
};
</script>

By advance, thank you so much :)

question from:https://stackoverflow.com/questions/65643946/vuejs-problem-with-alphabetic-sorting-in-arraylist

Answer 1

EDIT: alright, with a cleaner object

const items = [
  {
    artist: "Petit Biscuit",
    type: "rap",
    img:
      "https://media.virginradio.fr/article-4260166-head-f8/petit-biscuit.jpg",
    stage: "Scène A",
    day: "Samedi",
    hour: "22h",
  },
  {
    artist: "Booba",
    type: "rock",
    img:
      "https://www.parisladefense-arena.com/uploads/2018/10/3764-booba-orig-2.jpg",
    stage: "Scène B",
    day: "Vendredi",
    hour: "23h",
  },
  {
    artist: "Vald",
    type: "metal",
    img:
      "https://cdn.radiofrance.fr/s3/cruiser-production/2019/04/05e9523a-428f-4798-ad07-c4abcc70acfa/801x410_vald_album_2019.jpg",
    stage: "Scène C",
    day: "Samedi",
    hour: "23h",
  },
  {
    artist: "Jean Schultheis",
    type: "rap",
    img:
      "https://static1.purepeople.com/articles/6/30/54/86/@/4322687-semi-exclusif-jean-schultheis-vendre-950x0-1.jpg",
    stage: "Scène A",
    day: "Samedi",
    hour: "00h",
  },
]

items.sort((a, b) => a.artist.localeCompare(b.artist))

This one get's them ordered properly: Booba, Jean Schultheis, Petit biscuit and lastly Vald.

---

This one should work.

let items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
items.sort( (a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true}));
// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé'] 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#sort_an_array