Afficher les films par categorie/genre Javascript

Fermé
danielprudent Messages postés 1 Date d'inscription lundi 4 octobre 2021 Statut Membre Dernière intervention 4 octobre 2021 - Modifié le 4 oct. 2021 à 09:22
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/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 += '▼'
      }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@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)
</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>


EDIT : Ajout des balises de code


Merci et bonne soiree