Afficher film par genre/categorie

Pour toutes les discussions javascript, jQuery et autres frameworks
Daniel Prudent
Messages : 2
Enregistré le : 04 oct. 2021, 02:06

Afficher film par genre/categorie

Message par Daniel Prudent » 04 oct. 2021, 02:11

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": [
"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": " ... _SX300.jpg"


var value = $(this).val()
console.log('Value:', value)
var data = searchTable(value, myArray)

buildTable(myArray.slice(0, 15))

function searchTable(value, data){
var filteredData = []

for (var i = 0; i < data.length; i++){
value = value.toLowerCase()
var name =

if (name.includes(value)){


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)
text += '▼'
myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
text += '▲'


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=" ... 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/>
table.innerHTML += row

function myFunction()

function mySelect ()
var categ = document.getElementById("films").value;

function chargerCategs(){

var selCategs = document.getElementById("films");
var myArray = " ";

for(let i=0; i<selCategs;i++){

for(let uneCateg of listeCategories){
selCategs.options[] = new Option(uneCateg,uneCateg.substring(0,5));


<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>
<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 class="nav-item">
<a class="nav-link"<button onclick="myFunction();" href="#">Lister</a>
<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>




<table class="table">


<tbody id="myTable">


<script src="js/films.js"></script>

Merci et bonne soiree