Discussion :

[sanrala]

Bonjour,

Je débute dans la programmation depuis Avril de cette année et j'ai une question sur un problème en JavaScript via l'API de TMDB.

J'arrive a afficher les information fournis par l'API a part le genre_ids



Ca m'affiche dans ma page Web UNDEFINED

dans mon index.js j'ai ca :


cette partie me renvoi dans ma console sur mon autre page:




Jusque la, pas de problème.
voici le détail de mon code dans mon autre fichier JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
window.onload = () => {
  console.log(window);
  const urlSearchParams = new URLSearchParams(window.location.search)
  const params = Object.fromEntries(urlSearchParams.entries())
  console.log(params);
 
  const newCarouselAffiche = document.querySelector('#contentAffiche')
 
  let movies = fetch('https://api.themoviedb.org/3/movie/' + params.id + '?api_key=e0e252f245f519ae01af7682ea83a642&language=fr-FR&' + params.with_genres);
  movies.then(async response => {
    try {
      let popularMovie = await response.json();
 
      console.log(popularMovie);
      const b = document.querySelector('#star1')
 
      let genre = fetch('https://api.themoviedb.org/3/genre/movie/list?api_key=e0e252f245f519ae01af7682ea83a642&language=fr-FR');
      genre.then(async response => {
        try {
          let genreMovie = await response.json();
 
 
          let RegenreMovie = genreMovie.genres;
          console.log(RegenreMovie);
 
 
          const c = document.createElement('span')
          c.innerText = RegenreMovie.name
          b.append(c);
 
        } catch (error) {
          console.log(error);
        }
      })
 
      const div = document.querySelector('.slide-img')
      const img = document.createElement('img')
      img.classList.add('item')
      img.src = "https://image.tmdb.org/t/p/w500" + popularMovie.backdrop_path
      img.alt = popularMovie.title
 
      const box = document.querySelector('.item-a')
 
 
      const title = document.querySelector('h2')
 
      const span = document.createElement('span')
      span.classList.add('title')
      span.innerText = popularMovie.title
 
 
      const voteAverage = document.createElement('span')
      voteAverage.classList.add('voteAverageImdb')
      voteAverage.innerText = popularMovie.vote_average + "/10 "
 
 
      const logoAverage = document.createElement('img')
      logoAverage.classList.add('logoAverage')
      logoAverage.src = "icones/imdb.png"
      logoAverage.alt = "imdb"
 
 
      const genreID = document.createElement('span')
      genreID.classList.add('genreID')
      genreID.innerText = popularMovie.genre_ids
      genreID.style.color = "orange"
 
      const btnTrailer = document.createElement('img')
      btnTrailer.classList.add('btnTrailer')
      btnTrailer.style.backgroundColor = "orange"
      btnTrailer.src = "icones/play-circle-regular-24.png"
      btnTrailer.alt = "play circle"
 
 
 
      const aBA = document.createElement('a')
      aBA.href = "popularMovie.video"
 
      const BA = document.createElement('span')
      BA.classList.add('BA')
      BA.innerText = " Regarder la bande-annonce "
 
      voteAverage.append(logoAverage)
      div.append(img)
      box.append(span, voteAverage, genreID, btnTrailer)
      btnTrailer.append(BA)
 
 
 
 
      const sypnosis = document.querySelector('#resume')
      const p = document.createElement('p')
      p.innerText = popularMovie.overview
      sypnosis.append(p)
 
 
 
    } catch (error) {
      console.log(error);
    }
  })
}

Et c'est la que j'ai mon UNDEFINED pour la partie genre.
J'espère que je me suis bien expliqué et que quelqu'un aura une réponse à mon problème.

En vous remerciant d'avance

[NoSmoking]

Bonjour et bienvenue sur DVP.

Et c'est la que j'ai mon UNDEFINED pour la partie genre.

si l'on considère le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
genre.then(async response => {
  try {
    let genreMovie = await response.json();
    let RegenreMovie = genreMovie.genres;
    console.log(RegenreMovie);
    const c = document.createElement('span')
    c.innerText = RegenreMovie.name
    b.append(c);
  } catch (error) {
    console.log(error);
  }
})

genreMovie est un Array il te faut donc en tenir compte et écrire à minima :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
genre.then(async response => {
  try {
    let genreMovie = await response.json();
    // juste pour voir le retour
    console.log("genreMovie :", genreMovie);
    //let RegenreMovie = genreMovie.genres;
    //--------------------------------------------------------
    // genreMovie est un Array il te faut donc écrire à minima
    //--------------------------------------------------------
    let RegenreMovie = genreMovie.genres[0];
    console.log("RegenreMovie :", RegenreMovie);
 
    const c = document.createElement('span')
    c.innerText = RegenreMovie.name
    b.append(c);
 
  } catch (error) {
    console.log(error);
  }
})

Remarque :
pourquoi faire une requête pour obtenir tous les genres disponibles attendu que cela fait déjà partie des filtres de ta première requête ?