Использование slice () для возврата только первых 5 результатов

Question

Использование slice () для возврата только первых 5 результатов

0

В настоящее время у меня есть сайт, который при нажатии кнопки возвращает последние фильмы и телепередачи, которые транслируются.

Прямо сейчас api, который я использую, возвращает целую страницу значений до 20 результатов из моего исследования api, нет никакой функции ограничения, которую я хочу сделать, это получить 5 из этих результатов

Мне сказали, что функция slice() может работать.

Также любое другое, почему вы считаете, что моя работа будет приятной, если вы сможете найти другой способ

Я включил jsfiddle, но удалил свой api-ключ

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

Здесь весь мой код просто без ключа api

<html>
<head>
<title>Sample Seach</title>
<script src="/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

Jamiex304 13 апр. 2014, в 17:32

Источник

0

Если API поддерживает какой-либо параметр limit я бы предпочел использовать его вместо среза js. Но я не знаю, так ли это. Разве вы уже не используете что-то подобное &visible=5 ?
Marcel Gwerder 13 апр. 2014, в 15:21
0

sry, который был оставлен, не поддерживает функцию предела
Jamiex304 13 апр. 2014, в 15:24

Теги:

javascript

jquery

html

css

slice

3 ответа

1

Предполагая, что вы сохранили результаты в массиве,

arr.slice(0,5)

вернет первые пять элементов.

Stephen Thomas 13 апр. 2014, в 13:20

0

все результаты возвращаются из исходного вызова API. tmdb каждая страница представляет собой массив из 20 результатов. Я не знаю, как получить к ним доступ. Мне сказали, что срез может быть тем, что мне нужно, но я попробую что-нибудь?
Jamiex304 13 апр. 2014, в 15:23

0

Используя текущий $.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);
});

Kyle Needham 13 апр. 2014, в 13:22

Ещё вопросы

Если API поддерживает какой-либо параметр limit я бы предпочел использовать его вместо среза js. Но я не знаю, так ли это. Разве вы уже не используете что-то подобное &visible=5 ?
sry, который был оставлен, не поддерживает функцию предела
все результаты возвращаются из исходного вызова API. tmdb каждая страница представляет собой массив из 20 результатов. Я не знаю, как получить к ним доступ. Мне сказали, что срез может быть тем, что мне нужно, но я попробую что-нибудь?

vivek_nk · Accepted Answer · 2014-04-13T13-58-00.000Z

Используйте срез, чтобы сначала уменьшить массив, который должен быть повторен в функции обратного вызова 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>';
});