API（The moviedb.org）を使用してJavascriptからHTMLテーブルを生成

Question

私はthemoviedb.org apiを使用してデータベースから画像と情報を印刷しています。今では、画像の説明と評価を表の行にうまく表示するように書式を設定したいとします（js-jqueryからHtmlを生成するベストプラクティスは何ですか？ リンクで見ると、映画や彼ら下記に表示され、ここでの例を参照してください：。。ユーザーが、私は以前の結果を削除し、新しいものと交換したい別の映画のために再度検索するときもhttps://wherehd.herokuapp.com/

を

ここでは、どのように私のjsコードです次のようになります。

function search() 
    { 



     var movieTitle = $('#search_field').val(); 
     var str1 = "https://api.themoviedb.org/3/search/movie?include_adult=false&page=1&query="; 
     var str2 = "&language=en-US&api_key=xxx"; 
     var searchResult = str1+movieTitle+str2; 


     //var searchResult = str1.concat(encodeURI(movieTitle)).concat(str2); 

     var settings = 
     { 
      "async": true, 
      "crossDomain": true, 
      "url": searchResult, 
      "method": "GET", 
      "headers": {}, 
      "data": "{}" 

     } 

     $.ajax(settings).done(function (response) { 
      console.log(response); 

      var results = response.results; 

     for(var i=0; i < results.length; i++) 
     { 

      var movie = results[i]; 
      var description = movie.overview; 
      var title = movie.title; 
      var image = 'https://image.tmdb.org/t/p/w500' + movie.poster_path; 
      var releaseDate = movie.release_date; 
      //Display the description and image 

      if(movie.poster_path != null) 
      { 
       /*$("#Search-Results").append('<br><h1 style="color:red;font-size:32px;">'+title+'</h1>: '+description+'<br> Release date: <b style="color:yellow;">'+releaseDate+'</b><br> <img style="width:200px;height:300px;" src="https://image.tmdb.org/t/p/w500'+movie.poster_path+'"/>');*/ 

$("#Search-Results").append('<br><h1 style="color:red;font-size:32px;">' 
+title+'</h1> '+description+'<br> Release date: <b style="color:yellow;"> 
'+releaseDate+'</b><br> <img style="width:155px;height:214px;" 
src="https://image.tmdb.org/t/p/w500'+movie.poster_path+'"/>'); 
      } 



     } 


    }); 

    } 

Answer 1

いくつかのJからテーブルを生成する場合Sオブジェクトには、Datatablesプラグインを見てみたいです（かなり使いやすく、多くの機能があります）。 https://datatables.net/