Question

目前我有一个网站，当点击一个按钮时，它会返回正在播放的最新电影和电视节目。

现在我正在使用的api返回一整页值，最多20个结果来自我对api的研究没有限制函数我想做的就是返回其中5个结果

我被告知slice（）函数可能有效。

还有任何其他为什么你认为我的工作会很好，如果你能找到另一种方式

我已经包含了一个jsfiddle但删除了我的api密钥

这是我的所有代码，没有我的api密钥

<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'movie/now_playing',
    input,
    movieName,
    key = '?api_key=API KEY HERE';

    $('#search').click(function() {
        var input = $('#titlesearch').val(),
            movieName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+movieName' ,
            dataType: 'jsonp',
            success: function(data) {

        var table = '<table>';
        $.each( data.results, function( key, value ) {
          table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path +'" alt="" width="130" height="150"></td><td class="results-title"><h4>' + value.original_title + '</h4></td></tr>';
        });
        $('#searchresult').html(table);
            }
        });
    });
});
// tv show search
$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'tv/on_the_air',
    input,
    tvName,
    key = '?api_key=API KEY HERE';

    $('#search').click(function() {
        var input = $('#titlesearch').val(),
            tvName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+tvName,
            dataType: 'jsonp',
            success: function(data) {

        var table = '<table>';
        $.each( data.results, function( key, value ) {
          table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path +'" alt="" width="130" height="150"></td><td class="results-title"><h4>' + value.original_name + '</h4></td></tr>';
        });
        $('#searchresulttv').html(table);
            }
        });
    });
});
</script>
<script text="text/javascript">
// When the more button is click this runs a search using the title of the movie it is next to  
$('.results-img').live('click', '.results-img', function() {
    getImdbInfo( $(this).closest('tr').find('.results-title').text());
});

//The function below takes the entered title and searchs imdb for a match then it displays as followed

function getImdbInfo(Title) {
    var url = "http://www.omdbapi.com/?t=" + Title + "&plot=full";
    $.ajax({
      url: url,
      cache: false,
      dataType: "jsonp",
      success: function(data) {

            var str = "";
            str += "<h2><center>Title :" +data.Title+ "</center></h2>";
            str += "<center><img src='" + data.Poster + "' /></center><br />";
            str += "<h4><center>Plot :</center></h4><p>" +data.Plot+ "</p>";

            $("#chosenresult").html(str);
      },
      error: function (request, status, error) { alert(status + ", " + error); }
    });
}

</script>
</head>
<body>
<center>
<h1>Movie and Tv Search</h1>
<button id="search">Search</button>
</center>
<div id="chosenresult"></div>
<div id="searchresult" style="float:left;"></div>
<div id="searchresulttv" style="float:right;"></div>
</body>
</html>

我只想要5

的结果截图

enter image description here

Answer 1

使用slice首先减少必须在ajax的回调函数中迭代的数组。

var results = data.results.slice(0,5);
$.each(results, function( key, value ) {
          table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path +'" alt="" width="130" height="150"></td><td class="results-title"><h4>' + value.original_name + '</h4></td></tr>';
});

Answer 2

假设您已将结果存储在数组中，

arr.slice(0,5)

将返回前五个元素。

Answer 3

使用您当前的$.each：

$.each(data.results, function (index, value) {
    table += '<tr>
                <td class="results-img">
                  <img src="http://image.tmdb.org/t/p/w500' + value.poster_path + '" alt="" width="130" height="150">
                </td>
                <td class="results-title">
                  <h4>' + value.original_name + '</h4>
                </td>
              </tr>';

   return (index !== 6);
});

使用slice（）仅返回前5个结果

3 个答案: