How to work with Youtube search API

Ask the community
,
1

Hey! so long story short, I’m trying to create a program on wix code where its able to search through a particular Youtube channel to find videos specified by certain keywords inputted by a dynamic page. I got as far as being able to create the url but I am not sure how to get the video ids of each search result and display the videos with the Youtube API. How do I get this to work?

This is my first time with Wix code and javascript. Any help would be appreciated!

Here is my attempts:
The dynamic page code:

import { getVideos } from ‘backend/videoSearch.jsw’ ;

$w . onReady ( function () {

$w ( "#teamDataset" ). onReady (() => { 

let  name  =  $w ( "#teamDataset" ). getCurrentItem (); 

        $w ( '#text5' ). text  =  name ; 
        let  name1  =  name.title ; 
        
        getVideos ( name1 ) 
            . then ( response  => { 
                console . log ( response [ 0 ]. videoId ) 
            }) 
    });

})

the url:

import { fetch } from ‘wix-fetch’ ;

export function getVideos ( x ) {
let url = "https://youtube.googleapis. com/youtube/v3/search?part=snippet&channelId=UC6G_LCSmfd9q34BMao87E0g&maxResults=10&q=" + x + “&key=[my-api]” ;

console . log ( "Url: "  +  url ); 

**return**  fetch ( url , { method :  'get' }) 
    . then ( response  =>  response.json )

}

2

Hi,
Try:

//backend
 //...
 return fetch(url, {method: 'get'})
 .then(response => response.json())
 .then(r => r?.items)

//front-end
//...
getVideos(encodeURI(name1))
.then(response => {
  if(response.length){
  console.log(response[0].id.videoId);
  }
  })
3

This worked for me! Thank you so much!

4

Hey, umm… it was working and then it stopped working. I don’t know if its a temporary bug or something that I changed. I only changed the front end code and didn’t make any changes to the backend. The backend is outputting fine but im getting an " Error: Cannot read properties of undefined (reading ‘length’)" from line 23 in the front end and I’m not sure what to do.

Here’s what I did:

import wixData from ‘wix-data’ ;
import { fetch } from ‘wix-fetch’ ;
import wixFetch from ‘wix-fetch’ ;
import { getVideos } from ‘backend/videoSearch.jsw’ ;
//import “public/videos.html”;

$w . onReady ( function () {

$w ( "#teamDataset" ). onReady (() => { 

let  name  =  $w ( "#teamDataset" ). getCurrentItem (); 

        $w ( '#text5' ). text  =  name ; 
        let  name1  =  name.title ; 
        
        let  videos  = []; 
        let  videoLinks  = []; 


        getVideos(encodeURI ( name1 )) 
            . then ( response  => { 
                if  ( response.length ) { 
                    let  x  =  response.length ; 
                    let  video1  =  response [ 0 ]. id.videoId ; 
                    let  video2  =  response [ 1 ]. id.videoId ; 
                    let  video3  =  response [ 2 ]. id.videoId ; 
                    let  video4  =  response [ 3 ]. id.videoId ; 
                    
                    **for**  ( let  i  =  0 ;  i  <  x ;  i ++) { 
                        videos . push ( response[i ]. id.videoId ); 
                    } 
                    

                    let  z  =  videos.length 
                    
                    **for**  ( let  j  =  0 ;  j  <  z ;  j ++) { 
                        videoLinks . push ( "https://www.youtube.com/watch?v=" + videos[j ]) 
                    } 
                    
                    let  a  =  videoLinks.length 
                    
                    **for**  ( let  k  =  0 ;  k  <  a ;  k ++){ 
                        $w ( '#videoPlayer' + k ). src  =  videoLinks[k ] 
                    } 

                } 
            }) 
});

})

5

try changing it to:

//..
if (response?.length) {
//...
  • implement my code for the backend as well