Api javascript

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
eslytess
Messages : 3
Enregistré le : 01 déc. 2025, 16:21

Api javascript

Message par eslytess » 01 déc. 2025, 16:26

Bonjour
Je suis débutante dans JavaScript et je bloque sur un TP
Je me sers de cette API : https://imdb.iamidiotareyoutoo.com/docs ... et/mediaid

J'arrive à afficher mes cartes films et filtrer avec mes filtres de base (à-à-z) (populaire) ext.
C'est la première fois que je travaille avec une API et je rencontre un problème. Impossible de récupérer les catégories mais également le résumé de l'histoire
J'ai bien eu l'idée de crée un tableau en js avec des mots comme filtre pour chaque catégories mais sans résumé sa filtre uniquement le titre et donne un résultat erroné ..
Quelqu'un aurait une idée ? Merci !

Avatar du membre
webmaster
Administrateur du site
Messages : 648
Enregistré le : 28 févr. 2017, 15:19

Re: Api javascript

Message par webmaster » 01 déc. 2025, 18:56

Bonjour

N'hesite pas a poster ton code
Je peux jeter un coup d'oeil et donner un coup de main
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

eslytess
Messages : 3
Enregistré le : 01 déc. 2025, 16:21

Re: Api javascript

Message par eslytess » 02 déc. 2025, 15:59

Mon code pour le tri des données de mon api ( j'ai un autre code pour afficher, pagination, chercher les films )

Code : Tout sélectionner

// -------------------- BOUTONS TRI --------------------
document.getElementById("tri-btn").addEventListener("click", e => { e.preventDefault(); triParAnnee(filteredFilms); });
document.getElementById("tri-a-z").addEventListener("click", e => { e.preventDefault(); triParNom(filteredFilms); });
document.getElementById("tri-recents-movies").addEventListener("click", e => { e.preventDefault(); RecentMovies(filteredFilms); });
document.getElementById("tri-popularity").addEventListener("click", e => { e.preventDefault(); triParPopularite(filteredFilms); });

// -------------------- Btn filtre-----------
const categoryFiltre = {
  "Action" : [ "war", "fight", "fighting", "battle", "mission","gun", "guns", "soldier", "attack", "escape", "kill", "revenge"],
  "Aventure" : [ "adventure", "journey", "quest", "island", "treasure", "expedition", "jungle", "voyage", "explorer"],
  "Comedie" : [ "funny", "comedy", "laugh", "laughing", "humor", "humour", "joke", "crazy", "family"],
  "Drame" : [ "drama", "life", "story", "tragedy", "family issues", "relationship", "emotional", "confilct"],
  "Fantastique" : ["magic", "magical", "wizard", "dragon", "fairy", "feerie", "enchanted", "spell", "myth", "legend", "fantasy"],
  "Horreur" : ["horror", "ghost","haunted", "demon", "possesion", "curse", "blood", "zombie", "nightmare"],
  "Policier" : ["detective", "investigation", "crime", "police", "murder", "case", "suspect", "killer"],
  "Science-fiction" : ["space", "alien", "future", "robot", "android", "galaxy", "technology", "artificial intelligence", "ia", "time travel"],
  "Thriller" : ["suspense", "mystery", "dark", "pursuit" , "danger", "secret", "survival"]
};
 const annneeFiltre = {
        "0000-2000" : [0, 2000],
      "2000-2010": [2000, 2010],
      "2010-2020": [2010, 2020],
      "2020-2025": [2020, 2025],
    };
    const ageFiltre = {
        "10" : [0,10],
        "12" : [0,12],
        "16" : [0,16],
   
    }



    
function assignCategory(movie) {
  const text = ((movie["#TITLE"] || movie["#AKA"] || "") + " " + (movie["#PLOT"] || "")).toLowerCase();
  for (const category in categoryFiltre) {
    for (const keyword of categoryFiltre[category]) {
      if (text.includes(keyword.toLowerCase())) return category;
    }
  }
  return "Autre";
}

document.querySelectorAll(".annee-list li").forEach(li => {
  li.addEventListener("click", () => {

    const value = li.dataset.value;
    let yearMin = 0;
    let yearMax = Infinity;

    if (annneeFiltre[value]) {
      [yearMin, yearMax] = annneeFiltre[value];
    } else {

      filteredFilms = [...films];
      displayPage(1);
      createPagination(1);
      return;
    }

    filteredFilms = films.filter(f => {
      const y = Number(f.year);
      return y >= yearMin && y <= yearMax;
    });

    filteredFilms.sort((a, b) => b.year - a.year);

    current_page = 1;
    displayPage(current_page);
    createPagination(current_page);
  });
})



// -------------------- FILTRAGE CATÉGORIE --------------------
document.querySelectorAll(".select-list li").forEach(li => {
  li.addEventListener("click", () => {
    const selectedCategory = li.dataset.value;
    filteredFilms = films.filter(film => film.category === selectedCategory);
    current_page = 1;
    total_page = Math.ceil(filteredFilms.length / filmsPerPage);
    displayPage(current_page);
    createPagination(current_page);
  });
});

// ----------------- ETOILES -------------------
function generateStarRating(score, scoreMax = 10, totalStar = 5) {
  const numericScore = parseFloat(score) || 0;
  const starsCount = (numericScore / scoreMax) * totalStar;

  let stars = "";
  for (let i = 1; i <= totalStar; i++) {
    if (i <= starsCount) {
      stars += "★";
    } else if (i - 1 < starsCount && i > starsCount) {
      stars += "☆";
    } else {
      stars += "☆";
    }
  }
  return `<span class="star">${stars}</span>`;
}
const btnPopularity = document.getElementById("btnPopularity"); // Assure-toi que l'ID existe

btnPopularity.addEventListener("click", (e) => {
  e.preventDefault();
  triParPopularite(films);
});

function triParPopularite(filmsArray) {
  filmsArray.sort((a, b) => parseFloat(b.rating) - parseFloat(a.rating));
  filteredFilms = [...filmsArray];
  current_page = 1;
  total_page = Math.ceil(filteredFilms.length / filmsPerPage);
  displayPage(current_page);
  createPagination(current_page);
}
filteredFilms = [...filmsArray]; // mettre à jour le tableau filtré
current_page = 1;
total_page = Math.ceil(filteredFilms.length / filmsPerPage);
displayPage(current_page);
createPagination(current_page);


// -------------------- TRI --------------------


// Tri récent
function RecentMovies(filmsArray, yearMin = 2000) {
  filteredFilms = filmsArray
    .filter(f => f.year && f.year >= yearMin)
    .sort((a, b) => b.year - a.year);
  current_page = 1;
  displayPage(current_page);
  createPagination(current_page);
}

// Tri par année
function triParAnnee(filmsArray) {
  filteredFilms = [...filmsArray].sort((a, b) => b.year - a.year);
  current_page = 1;
  displayPage(current_page);
  createPagination(current_page);
}

// Tri A → Z
function triParNom(filmsArray) {
  filteredFilms = [...filmsArray].sort((a, b) => a.title.localeCompare(b.title, "fr", { sensitivity: "base" }));
  current_page = 1;
  displayPage(current_page);
  createPagination(current_page);
}
J'ai réussi du coup a faire marcher mon tri catégorie en créant un tableau avec des mots clefs comme filtres, ces vraiment pas terrible je sais :')
Dans mon api la seul chose que je récupère d'un film ces sa exemple :
description
:
Array(8)
0
:
#ACTORS
:
"Daniel Radcliffe, Rupert Grint"
#AKA
:
"Harry Potter and the Sorcerer's Stone (2001) "
#IMDB_ID
:
"tt0241527"
#IMDB_IV
:
"https://IMDb.iamidiotareyoutoo.com/title/tt0241527"
#IMDB_URL
:
"https://imdb.com/title/tt0241527"
#IMG_POSTER
:
"https://m.media-amazon.com/images/M/MV5 ... @._V1_.jpg"
#RANK
:
148
#TITLE
:
"Harry Potter and the Sorcerer's Stone"
#YEAR
:
2001
photo_height
:
2902
photo_width
:
1972


Des idées pour récupérer les catégories, description, limite d'âge ?

En vous remerciant d'avance pour vos réponse et soyez pas trop dur je débute juste

Avatar du membre
webmaster
Administrateur du site
Messages : 648
Enregistré le : 28 févr. 2017, 15:19

Re: Api javascript

Message par webmaster » 02 déc. 2025, 18:07

C'est pas mal je trouve

Pour chercher d'autres infos, il faut plonger dans la doc de l'api
par exemple https://developer.imdb.com/documentatio ... _=side_nav donne des infos sur le niveau de recommandation selon l'age
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

eslytess
Messages : 3
Enregistré le : 01 déc. 2025, 16:21

Re: Api javascript

Message par eslytess » 03 déc. 2025, 10:17

Merci beaucoup, j'ai présenté mon projet(exo) au travail et mes responsables ont trouvé ça cool ! Je pars sur un autre projet météo ( avec une autre api )

Avatar du membre
jamespears
Messages : 2
Enregistré le : 05 nov. 2025, 07:00

Re: Api javascript

Message par jamespears » 05 déc. 2025, 07:30

Si tes cartes s’affichent déjà, c’est bon signe, ça veut dire que ta requête API fonctionne. Pour les catégories et le résumé, vérifie bien la structure exacte de la réponse renvoyée par l’endpoint. Souvent, ces infos sont dans un sous-objet (ex: details.summary ou info.genres). Ouvre la réponse dans la console (console.log(data)) pour voir où se trouvent vraiment les champs. Tant que tu n’utilises pas la bonne clé, tes filtres ne pourront pas marcher. Une fois les champs identifiés, tu peux récupérer les catégories directement depuis l’API plutôt que créer un tableau manuel, ce sera beaucoup plus fiable.
Passionate about learning and sharing JavaScript techniques. Always exploring new ways to write cleaner, more efficient code.

ilyesdelaunay26
Messages : 1
Enregistré le : 26 déc. 2025, 08:33
Contact :

Re: Api javascript

Message par ilyesdelaunay26 » 26 déc. 2025, 18:42

Avec une API, tout dépend des champs disponibles dans la réponse. Vérifie si le résumé et les catégories sont bien inclus dans le JSON retourné ; si non, il faudra peut-être un endpoint différent ou un traitement pour les extraire.

Répondre