11525 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

je parcours le site depuis quelques mois et franchement, quel mine d'information, BRAVO et surtout merci !
Cependant, j'ai une question dont je ne trouve pas de réponse.

Je suis entrain de coder galerie d'images et de videos, tout fonctionne parfaitement, sauf le tri de la galerie.
Je vous explique (voici mon code JS) :

async function getGalleryItems() {
  //Récupération de l'ID de la page
  const queryString_url_id = window.location.search;
  const urlSearchParams = new URLSearchParams(queryString_url_id);
  const id = urlSearchParams.get("id");
  const response = await fetch(json_url);
  const data = await response.json();
  const mediasArray = data.media;
  let filteredMedia = mediasArray.filter(function (el) {
    console.log(el.photographerId == id);
    return el.photographerId == id;
  }); //! ICI TABLEAU FILTRE DU PHOTOGRAPHE
  console.log({ media: [...filteredMedia] });

  // Filtered by likes
  //============================================
  // filteredMedia.sort(function compare(a, b) {
  //   if (a.likes < b.likes) return -1;
  //   if (a.likes > b.likes) return 1;
  //   return 0;
  // });
  //============================================
  // Filtered by title
  //============================================
  // filteredMedia.sort(function compare(a, b) {
  //   if (a.title < b.title) return -1;
  //   if (a.title > b.title) return 1;
  //   return 0;
  // });
  //============================================
  for (let i = 0; i < filteredMedia.length; i++) {
    return { media: [...filteredMedia] };
  }
}
//Affichage des données des photographes
async function displayGallery(medias) {
  const gallerySection = document.querySelector("#photograph_gallery");
  medias.forEach((media) => {
    const photographerGallery = galleryFactory(media);
    const galleryCardDOM = photographerGallery.getImageDOM();
    gallerySection.appendChild(galleryCardDOM);
  });
}
async function initGallery() {
  const { media } = await getGalleryItems();
  await displayGallery(media);
}


Si je décommente un des blocs commenté (filtered by title par exemple), la galerie s'affiche bien triée.
Seulement, ce que je voudrais, c'est le faire dynamiquement, quand un utilisateur clique sur un bouton de tri (par date, titre, etc..), la galerie se mette a jour ! Et la impossible, je n'arrive pas a sortir ces blocs de tri et les placer dans une fonction qui au clic fait le tri et met a jour la galerie.

Quelqu'un aurait-il une piste ? Un façon de procéder ? La je sèche complètement, je n'arrive pas a visualiser la logique !

Merci d'avance à tous ! Smiley lol

CodeBash
Salut,

a priori tu dois pouvoir rajouter un paramètre "type de tri" à ta fonction getGalleryItems pour choisir comme c'est trié ( plus pratique que d'avoir du code à dé-commenter Smiley sweatdrop )

Ensuite il faudra rajouter un event (clique sur un bouton/entête ?) pour relancer la fonction et recréer le contenu.