I'm having a little difficulty in my code and I would like a light, I will leave my code below for you to understand, I want that when I click on " #btn_search_youtube " it returns the JSON with the results of my search, example ("http://127.0.0.1/youtube/search?q= {SEARCHCONTENT}").
I found a website that does something similar, I'll leave it below for better understanding "https://server1.mtabrasil.com.br/youtube/search?q=akon"
my code:
$("#btn_search_youtube").click(function() {
let search_youtube = $("#search_youtube").val();
$("#result_youtube tbody").empty();
$("#result_youtube").hide();
$("#loading_youtube").show();
$.getJSON("http://127.0.0.1/youtube/search?q="+search_youtube, function(resultado) {
$.each(resultado.items, async function(i, item) {
if (item.type == "video") {
let link = "http://127.0.0.1/youtube/play?id="+item.id;
let link_download = "http://127.0.0.1/youtube/download?id="+item.id;
$("#result_youtube tbody").append(`
<tr>
<td><img src="https://img.youtube.com/vi/${item.id}/default.jpg" alt="" style="width: 67px;height: 67px;"></td>
<td style="width: 60%;">
<strong>${item.title}</strong><br><audio controls="" preload="none">
<source src="${link}" type="audio/mpeg">
</audio>
</td>
<td>
<span class="glyphicon glyphicon-time"></span> ${item.duration}
</td>
<td>
<a href="${link_download}" class="btn btn-default"><i class="glyphicon glyphicon-cloud-download"></i> Download</a>
<button onclick="copy('setradio ${link}')" type="button" class="btn btn-default"><span class="glyphicon glyphicon-link"></span> Copiar URL</button>
</td>
</tr>
`);
}
});
$("#result_youtube").show();
$("#loading_youtube").hide();
});
});