如何更改结果 Youtube Data API v3

Question

我想在向下滚动时使用 nextPageToken 来获取新结果。

https://developers.google.com/youtube/v3/docs/playlistItems/list?hl=ko

例如，如果您最初进行搜索并显示 6 个项目，向下滚动以查看与这 6 个搜索词相关的其他视频。

相同的视频不断出现。如何更改结果？？

onModalShow.js

import {$} from "../utils/querySelector.js";
import {renderRecentKeyword, renderSearchResult} from "../view/Modalview.js";
import {getURLQueryStringApplied, request} from "../utils/fetch.js";
import {MAX_RESULT_COUNT, PART_TYPE, REGION_CODE, SEARCH_TYPE_VIDEO} from "../constant.js";



const NEXT_PAGE_TOKEN ="";

const processJSON = (rawData) => {
 
    return rawData.items.map((item)=>({
        videoId : item.id.videoId,
        videoTitle : item.snippet.title,
        channelId : item.snippet.channelId,
        channelTitle : item.snippet.channelTitle,
        publishedAt : item.snippet.publishedAt,
    }));
};


export const requestSearch =(url)=>{
    request(url)
        .then((response)=>{

            return processJSON(response);
        })
        .then((articleInfo)=>renderSearchResult(articleInfo))
        .then((error)=>console.log(error));
};



export const renderSearchGroup=()=>{

    const $keywordInput = $('#search-input').value;
    const url = getURLQueryStringApplied({

       
        part: PART_TYPE,
        
        q: $keywordInput,
    
        type: SEARCH_TYPE_VIDEO,
   
        maxResults: MAX_RESULT_COUNT,

        regionCode: REGION_CODE,
        pageToken :  NEXT_PAGE_TOKEN,

    });


    requestSearch(url);
}



export const onSearchKeywordClick=()=>{
    const $keywordInput = $('#search-input').value;
    renderSearchGroup();
    renderRecentKeyword($keywordInput);
}

export const onSearchKeywordEnter = (e) => {
    const $keywordInput = $('#search-input').value;
    e.preventDefault();
    renderSearchGroup();
    renderRecentKeyword($keywordInput);

};

fetch.js

import {API_KEY} from "./api.js";

export const request = async (url) => {
    try {
        const response = await fetch(url, {
            method: 'GET',
        });


        if (!response.ok) {
            throw Error(response.statusText);
        }

        return response.json();
    } catch (e) {
        console.error(e);
    }
};


export const getURLQueryStringApplied = (queryStrings) => {
    
    const queryString = Object.keys(queryStrings)
        .map((key)=>`&${key}=${queryStrings[key]}`)
        .join('');
    return `https://www.googleapis.com/youtube/v3/search?key=${API_KEY}`.concat(queryString);
};

index.js


import {$} from "./utils/querySelector.js";
import {onModalClose, onModalShowOpen} from "./view/Modalview.js";
import {onSearchKeywordClick} from "./handle/onModalShow.js";
import {onSearchKeywordEnter} from "./handle/onModalShow.js";
import {onMoreScroll} from "./handle/onMoreScroll.js";



const $searchKeyWordForm = $('#search-keyword-form');
const $searchBtn =$('#search-submit');

const $modalInner = $('.modal-inner');
export const YoutubeClassRoom =()=>{


    $('#search-button').addEventListener("click",onModalShowOpen);
    $('.modal-close').addEventListener("click",onModalClose);

  
    $searchKeyWordForm.addEventListener("submit",onSearchKeywordEnter);

  
    $searchBtn.addEventListener("click",onSearchKeywordClick);

    $modalInner.addEventListener("scroll",onMoreScroll);


};



YoutubeClassRoom();

Answer 1

很简单向查找字段添加一个值，然后下一页令牌将其添加为 pageToken 属性值，您将得到结果。

let nextPageToken ='';
const processJSON = (rawData) => {


    nextPageToken=rawData.nextPageToken;

   
    return rawData.items.map((item)=>({
        videoId : item.id.videoId,
        videoTitle : item.snippet.title,
        channelId : item.snippet.channelId,
        channelTitle : item.snippet.channelTitle,
        publishedAt : item.snippet.publishedAt,

    }));
};


export const nextPage =()=>{

    const $keywordInput = $('#search-input').value;

    const url =getURLQueryStringApplied({

        part : PART_TYPE,
        q:  $keywordInput,
        type : SEARCH_TYPE_VIDEO,
        maxResults : 2,
        regionCode: REGION_CODE,
        pageToken: nextPageToken,
    });

    requestSearch(url);
    nextPageToken='';
}

如何更改结果 Youtube Data API v3

How to change results Youtube Data API v3

javascript

api

youtube-data-api