使用 slice() 只返回前 5 个结果答案

【问题标题】：Using slice() to only return the first 5 results使用 slice() 只返回前 5 个结果
【发布时间】：2014-05-27 11:40:17
【问题描述】：

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

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

有人告诉我 slice() 函数可能会起作用。

还有其他任何你认为我的工作会很好的原因，如果你能想出另一种方法

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

jsfiddle - http://jsfiddle.net/xvTe9/

这是我所有的代码，只是没有我的 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 个结果的屏幕截图

【问题讨论】：

如果 api 支持某种 limit 参数，我宁愿使用那个参数而不是 js 切片。但我不知道是不是这样。你不是已经在使用类似&visible=5 的东西了吗？
sry 剩下的不支持任何限制功能

标签： javascript jquery html css slice

【解决方案1】：

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

arr.slice(0,5)

将返回前五个元素。

【讨论】：

所有结果都是从 api 源调用 tmdb 返回的每个页面都是一个包含 20 个结果的数组，我不知道如何访问它们我被告知切片可能是我需要的，但我会尝试什么？

【解决方案2】：

在ajax的回调函数中，先使用slice对必须迭代的数组进行reducer。

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>';
});

【讨论】：

【解决方案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);
});

【讨论】：