Discussion :

[danielprudent]

Bonjour j'ai besoin d'aide svp concernant un tp. il faut que j affiche les cards des films selon le genre
pourriez-vous m'aider svp (JavaScript)
Voice mon code ;

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
  {
        "id": 146,
        "title": "The Big Short",
        "year": "2015",
        "runtime": "130",
        "genres": [
            "Biography",
            "Comedy",
            "Drama"
        ],
        "director": "Adam McKay",
        "actors": "Ryan Gosling, Rudy Eisenzopf, Casey Groves, Charlie Talbert",
        "plot": "Four denizens in the world of high-finance predict the credit and housing bubble collapse of the mid-2000s, and decide to take on the big banks for their greed and lack of foresight.",
        "posterUrl": "https://images-na.ssl-images-amazon.com/images/M/MV5BNDc4MThhN2EtZjMzNC00ZDJmLThiZTgtNThlY2UxZWMzNjdkXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX300.jpg"
    }
 
 
	]
 
    $('#search-input').on('keyup',function(){
        var value = $(this).val()
        console.log('Value:', value)
        var data = searchTable(value, myArray)
        buildTable(data)
    })
 
 
 
	buildTable(myArray.slice(0, 15))
    chargerCategs()
 
    function searchTable(value, data){
        var filteredData = []
 
        for (var i = 0; i < data.length; i++){
            value = value.toLowerCase()
            var name = data[i].name.toLowerCase()
 
             if (name.includes(value)){
                 filteredData.push(data[i])
 
             }
        }
 
        return filteredData
    }
 
  $('th').on('click', function(){
      var column = $(this).data('colname')
      var order = $(this).data('order')
      var text = $(this).html()
      text = text.substring(0, text.length - 1);
 
 
 
      if (order == 'desc'){
         myArray = myArray.sort((a, b) => a[column] > b[column] ? 1 : -1)
         $(this).data("order","asc");
         text += '&#9660'
      }else{
         myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
         $(this).data("order","desc");
         text += '&#9650'
      }
 
     $(this).html(text)
     buildTable(myArray)
     })
 
	function buildTable(data){
		var table = document.getElementById('myTable')
 
        table.innerHTML = ''
	for (var i = 0; i < data.length; i++){
 
 
 
           var row = `
            <link rel="stylesheet" href="css/style.css">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
 
 
							<div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="${data[i].posterUrl}alt="Card image cap"></img>
                            <div class="card-body">
                            <h5 class="card-title"> ${data[i].title}</h5>
							<p class="card-text"><h5> ${data[i].year}</h5>
							<p> ${data[i].runtime} min
                            <p><h6>Genres:</h6> ${data[i].genres}
                            <p><h6>Director:</h6> ${data[i].director}
                            <p><h6>Actors:</h6> ${data[i].actors}
                            <p><h6>Description:</h6> ${data[i].plot}<p>
                            <a href="#" class="btn btn-primary">Ajouter au panier<a/>
                            <a href="#" class="btn btn-primary">Bande annonce<a/>
              </div>
					  <div>`
			table.innerHTML += row
 
 
 
		}
	} 
  function myFunction()  
  {
 
     buildTable(myArray)
};   
function mySelect ()
{
    var categ = document.getElementById("films").value;
    buildTable(myArray)
}
 
 
function chargerCategs(){
 
    var selCategs = document.getElementById("films");
    var myArray = " ";
 
    for(let i=0; i<selCategs;i++){
 
 
 
    }
    for(let uneCateg of listeCategories){
        selCategs.options[selCategs.data.length] = new Option(uneCateg,uneCateg.substring(0,5));
    }
}

(HMTL)

Code html :

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
</style>
<nav class="navbar navbar-expand-lg navbar-light black">
  <a class="navbar-brand" href="#">FILM_IFT1142</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link"<button onclick="myFunction();" href="#">Lister</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Lister par categorie</a>
      <li class="nav-item">
        <a class="nav-link" <label for="films">Choisir une categorie</label></a>
        <select onchange="mySelect();" name="films" id="films"></select>
 
      </li>
 
 
    </ul>
  </div>
</nav>
<header>
 
</header>
 
<table class="table">
 
 
 
    </div>
 
 
    <tbody id="myTable">
 
 
 
 
 
 
    </tbody>
    <footer></footer>
</table>
 
<script src="js/films.js"></script>

Merci et bonne soiree

[SpaceFrog]

Des idées par là
https://www.developpez.net/forums/d1...eurs-colonnes/