Jak pozbyć się zdublowanych wartości po mapowaniu tablicy?

Hejka wszystkim! Otóż mam problem, tworze sobie projekcik do swojego portfolio dotyczący aplikacji/witryny na temat zakładów bukmacherskich. Nie posiadam dostępu do żadnego api, dlatego symuluje sobie je z pliku "response.json", który jest tablicą obiektów składających się na poszczególne zdarzenia sportowe "nazwy drużyn, kraje, czas spotkania itp..." Chciałbym aby była możliwość sortowania zdarzeń po kraju. W tym celu utworzyłem sobie selecta wraz z opcjami, w którym po uzyciu map na wspomnianym pliku "response.js" i próbie wyświetlenia w celu filtracji opcje są dublowane. (Kilka drużyn może być z tego samego kraju ;/). Pytanie brzmi jakie są możliwości uniknięcia zdublowanych wartośći i o ewentualne wskazanie ścieżki w jaki sposób najwygodniej można byłoby wyświetlić tylko i wyłącznie rekordy powiązane z danym krajem z wybranego wcześniej selecta.

                                                                          Zamierzony Efekt

https://github.com/udaceue/Bet-Tips-App.git branch --> master

Jeśli tablica jest posortowana, to wystarczy sprawdzać w map, czy poprzedni element ma identyczną wartość (tekst), i opuszczać wypisywanie tej samej wartości. Ale zaznaczam, że nie znam React.

overcq napisał(a):

Jeśli tablica jest posortowana, to wystarczy sprawdzać w map, czy poprzedni element ma identyczną wartość (tekst), i opuszczać wypisywanie tej samej wartości. Ale zaznaczam, że nie znam React.

To w takim układzie, już lepiej filter, lub jeszcze lepiej reduce, aby mieć dostęp do poprzedniego elementu.

Chłopie wrzuć konkretny kod, nie będę szukał po twoim gh

Najprostszym i chyba najbardziej wydajnym sposobem, od kiedy struktury danych Set i Map zostały wprowadzone do js, to wrzucenie tablicy do new Set(array)
Set trzyma tylko unikatowe wartości.

Chodzi chyba o ten komponent https://github.com/udaceue/Bet-Tips-App/blob/master/src/components/DropdownFlags.jsx

I o ile dobrze zrozumiałem strukturę, która przekazujesz to taka prosta metoda do filtrowania powinna wystarczyć

const createUniqueList = (events) => {
  const unique = new Set(); // #1

  for (const event of events) { // #2
    if (event?.tournament?.category?.name) { // #3
      unique.add(event.tournament.category.name); // #4
    }
  }

  return unique; // #5
}

1. Tworzymy obiekt Set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
2. Robimy pętle po przekazanej tablicy
3. Sprawdzamy, czy element posiada konkretną wartość https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
4. Jeśli wszystko się zgadza to dodajemy ją do Set
5. Zwracamy tablice z listą unikalnych wartości

Nie testowałem tego, ale w taki sposób powinno raczej zadziałać

import React from "react";

const createUniqueList = (events) => {
  const unique = new Set();

  for (const event of events) {
    if (event?.tournament?.category?.name) {
      unique.add(event.tournament.category.name);
    }
  }

  return unique;
}

function DropdownFlags({ response: { events }}) {
  const uniqueCountries = createUniqueList(events);

  return (
    <div>
      <select>
        {uniqueCountries.map((country) => (
          <option value={country}>{country}</option>
        ))}
      </select>
    </div>
  );
}

export default DropdownFlags;

Xarviel napisał(a):

1. Tworzymy obiekt Set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
2. Robimy pętle po przekazanej tablicy
3. Sprawdzamy, czy element posiada konkretną wartość https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
4. Jeśli wszystko się zgadza to dodajemy ją do Set
5. Zwracamy tablice z listą unikalnych wartości

Tak chodziło o ten komponent, dziękuje pięknie. Nie słyszałem wcześniej o obiekcie Set