Afficher film par genre/categorie

[Daniel Prudent]

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 ; {
"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 ... _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.name.toLowerCase()

if (name.includes(value)){
filteredData.push(data)

}
}

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 += '▼'
}else{
myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
$(this).data("order","desc");
text += '▲'
}

$(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@ ... ap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">



<div class="card" style="width: 18rem;">
<img class="card-img-top" src="${data.posterUrl}alt="Card image cap"></img>
<div class="card-body">
<h5 class="card-title"> ${data.title}</h5>
<p class="card-text"><h5> ${data.year}</h5>
<p> ${data.runtime} min
<p><h6>Genres:</h6> ${data.genres}
<p><h6>Director:</h6> ${data.director}
<p><h6>Actors:</h6> ${data.actors}
<p><h6>Description:</h6> ${data.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)

</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