構建允許使用YouTube API進行YouTube搜索的頁面

這裏有什麼問題？我是JavaScript新手和使用API。任何意見是極大的讚賞。我希望網頁只搜索youtube中的searchTerm，並將匹配的視頻返回到控制檯並將其添加到文檔中。構建允許使用YouTube API進行YouTube搜索的頁面

這是我的HTML和JS。

HTML：

<body> 
<form id="search-term"> 
    <input type="text" name="input" id="query" placeholder="Enter YouTube search here" /> 
    <label for="input"><input type="submit" class="submit" value="Submit" /></label> 
</form> 
<div id="search-results"> </div>

JS：

$(document).ready(function(){ 


$(function() { 
    $('#search-term').submit(function(event){ 
     event.preventDefault(); 
     var searchTerm = $('#query').val(); 
     getRequest(searchTerm); 
    }); 
}); 

function getRequest(searchTerm){ 
    var params = { 
     part: 'snippet', 
     key: 'AIzaSyBCaDivrcL_ivWRsuA_rw-UWH0Xr9K0iLQ', 
     q: searchTerm, 
//  r: 'json' 
    }; 
    url = 'https://www.googleapis.com/youtube/v3/search'; 

    $.getJSON(url, params, function(data){ 
     showResults(data.Search); 
    }); 
} 

function showResults (results) { 
    var html = ""; 
    $.each(results, function(index, value) { 
     html += '<p>' + value.Title + '</p>'; 
     console.log(value.Title); 
    }); 
    $('#search-results').html(html); 
}

}）;

來源

2015-03-02 coolalligator15

你應該看看XML，這裏是你可以用它做什麼：https://www.thenewboston.com/videos.php?cat=11&video=17093 – 2015-03-02 19:38:59

[YouTube的API V3搜索可能重複通過關鍵字JavaScript]（http://stackoverflow.com/questions/26975365/youtube-api-v3-search-by-keyword-javascript） – mpgn 2015-03-02 20:51:39

問題出在什麼API返回。 YouTube API可以正確返回，但data上沒有Search。嘗試在您的getJSON中輸入console.log(data);，您將會看到沒有Search對象...但有items，我認爲這是您在此之後的內容。

function getRequest(searchTerm){ 
    var params = { 
    part: 'snippet', 
    key: 'AIzaSyBCaDivrcL_ivWRsuA_rw-UWH0Xr9K0iLQ', 
    q: searchTerm, 
    //r: 'json' 
    }; 
    url = 'https://www.googleapis.com/youtube/v3/search'; 

    $.getJSON(url, params, function(data){ 
    showResults(data.items); //<-- There is no `data.Search` 
    }); 
} 

function showResults (results) { 
    var html = ""; 
    $.each(results, function(index, value) { 
    html += '<p>' + value.snippet.title + '</p>'; 
    console.log(value.snippet.title); //<-- There is also no `Title` on value. 
    }); 
    $('#search-results').html(html); 
}

來源

2015-03-02 23:06:14 SnareChops

構建允許使用YouTube API進行YouTube搜索的頁面

回答

相關問題