Utilizing Javascript to make multiple API requests to fetch data from Youtube

Question

Utilizing Javascript to make multiple API requests to fetch data from Youtube

Currently, I am attempting to create a JSON object that represents the views per video for a specific YouTube user.

To achieve this, I start by making an API call to retrieve all the video IDs from a designated channel, storing them in an empty array. Subsequently, I iterate through each video ID to make multiple API calls for individual videos in order to collect data about their respective views.

At present, each video requires its own API call and I am facing challenges in consolidating all the data retrieved from these calls into a single object.

I recognize that there might be a more efficient approach to address this issue, and I am seeking recommendations on how to better handle this situation.

Thank you!

var channelId = 'UCO1cgjhGzsSYb1rsB4bFe4Q'
var url = 'https://www.googleapis.com/youtube/v3/search?key=' + apiKey + '&channelId=' + channelId + '&part=snippet,id&order=date&maxResults=20'

fetch(url).then((resp) => resp.json()).then(function(data) {
        var videoIds = []
        for (var i = 0; i < data.items.length; i++) {
            videoIds.push(data.items[i].id.videoId)
        }
        return videoIds
    }).then(function(ids) {
        var urls = []
        for (var i = 0; i < ids.length; i++) {
            urls.push('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + ids[i] + '&key=' + apiKey)
        }
        return urls
    }).then(function(urls) {
            for (var i = 0; i < urls.length; i++) {
                fetch(urls[i]).then((resp) => resp.json()).then(function(data) {
                    console.log(data)
                })
            }

update

I found a solution to this problem by utilizing another fetch URL along with the d3.json function.

var search = 'https://www.googleapis.com/youtube/v3/search?key=' + apiKey + '&channelId=' + channelId + '&part=snippet,id&order=date&maxResults=5'

var videoIds = []

fetch(search).then((resp) => resp.json())
.then(function(data) {
    for (var i = 0; i < data.items.length; i++) {
        videoIds.push(data.items[i].id.videoId)
    }

    return fetch("https://www.googleapis.com/youtube/v3/videos?id=" +videoIds + "&part=snippet%2CcontentDetails%2Cstatistics&key=" + apiKey);

}).then(function(response) {
        d3.json(response.url, function(error, data) {
                    if (error) throw error;
                    console.log(data)

javascript json api object youtube

Answer 1

Answer №1

To ensure all parallel promises return successfully before proceeding, you have the option to create a custom promise as a wrapper that waits for their completion. If all promises are successful, you can use resolve to confirm success or reject to handle errors.

The crucial part of this process occurs within the function

getChannelVideos(channelId, config)

, specifically inside the Promise body:

var channelId = 'UCO1cgjhGzsSYb1rsB4bFe4Q'

 + '&channelId='
const baseUrl = 'https://www.googleapis.com/youtube/v3';
let config = {
  apiKey: 'yourKeyHere',
  part: 'snippet,id',
  order: 'date',
  maxResults: 20
}

function queryArgs(config) {
  let query = '';
  config.apiKey ? query += '?key=' + config.apiKey : throw { err: 'You must provided an API KEY' };
  config.part ? query += '&part=' + config.part : query;
  config.order ? query += '&order=' + config.order : query;
  config.maxResults ? query += '&maxResults=' + config.maxResults : query;
  return query;
}

function getChannelVideos(channelId, config) {
 let URL = baseUrl + '/search' + queryArgs(config) + '&channelId=' + channelId;
 // Wrap necessary actions in a Custom Promise and return it for handling
  return new Promise((resolve, reject) => {
    // variables to store video data and promises to wait on
    let videos = [];
    let videoPromises = [];
    // Execute Channel Request followed by video requests (Callback hell)
    fetch(URL)
      .then((resp) => resp.json())
      .then(
        data => {
            // Declare vars outside map for improved memory management
            let currentVideoId;
            let currentRequestUrl;
            // Iterate over 'data.items' creating an array of promises using .map(handler)
            videoPromises = data.items.map(item => {
              currentVideoId = item.id.videoId;
              currentRequestUrl = baseUrl + '/videos?part=statistics&id=' + currentVideoId + '&key=' + config.apiKey;
              return fetch(currentRequest)
                       .then(
                         res => {
                           // Store Video Response in videos array
                           videos.push(res);
                         }, 
                         err => {
                           console.log('A Video request failed', err);
                         });
            });
        });
      
      // Wait for ALL promises to succeed
      Promise.all(videoPromises).then(
        success => {
          console.log('All retrieved successfully!');
          resolve({
            status: 200,
            data: {
              videos : videos
            }
          });
        },
        err => {
          reject({ 
            status: 500,
            error: err, 
            message: 'Something went wrong, but the data is available!', 
            data: videos 
          });
        })
  });
}

// CALL THE FUNCTION
getChannelVideos(channelId, config).then(
  res => {
    // Access the retrieved videos
    console.log('videos[]', res.data.videos);
  },
  err => {
    console.log('Error occurred', err);
  });

This approach should enhance performance with fewer loops and reduced call stack. Utilizing Array.map(handler) is recommended by the JavaScript community for its efficiency. Happy Coding!

Answer 2

To ensure all parallel promises return successfully before proceeding, you have the option to create a custom promise as a wrapper that waits for their completion. If all promises are successful, you can use resolve to confirm success or reject to handle errors.

The crucial part of this process occurs within the function

getChannelVideos(channelId, config)

, specifically inside the Promise body:

var channelId = 'UCO1cgjhGzsSYb1rsB4bFe4Q'

 + '&channelId='
const baseUrl = 'https://www.googleapis.com/youtube/v3';
let config = {
  apiKey: 'yourKeyHere',
  part: 'snippet,id',
  order: 'date',
  maxResults: 20
}

function queryArgs(config) {
  let query = '';
  config.apiKey ? query += '?key=' + config.apiKey : throw { err: 'You must provided an API KEY' };
  config.part ? query += '&part=' + config.part : query;
  config.order ? query += '&order=' + config.order : query;
  config.maxResults ? query += '&maxResults=' + config.maxResults : query;
  return query;
}

function getChannelVideos(channelId, config) {
 let URL = baseUrl + '/search' + queryArgs(config) + '&channelId=' + channelId;
 // Wrap necessary actions in a Custom Promise and return it for handling
  return new Promise((resolve, reject) => {
    // variables to store video data and promises to wait on
    let videos = [];
    let videoPromises = [];
    // Execute Channel Request followed by video requests (Callback hell)
    fetch(URL)
      .then((resp) => resp.json())
      .then(
        data => {
            // Declare vars outside map for improved memory management
            let currentVideoId;
            let currentRequestUrl;
            // Iterate over 'data.items' creating an array of promises using .map(handler)
            videoPromises = data.items.map(item => {
              currentVideoId = item.id.videoId;
              currentRequestUrl = baseUrl + '/videos?part=statistics&id=' + currentVideoId + '&key=' + config.apiKey;
              return fetch(currentRequest)
                       .then(
                         res => {
                           // Store Video Response in videos array
                           videos.push(res);
                         }, 
                         err => {
                           console.log('A Video request failed', err);
                         });
            });
        });
      
      // Wait for ALL promises to succeed
      Promise.all(videoPromises).then(
        success => {
          console.log('All retrieved successfully!');
          resolve({
            status: 200,
            data: {
              videos : videos
            }
          });
        },
        err => {
          reject({ 
            status: 500,
            error: err, 
            message: 'Something went wrong, but the data is available!', 
            data: videos 
          });
        })
  });
}

// CALL THE FUNCTION
getChannelVideos(channelId, config).then(
  res => {
    // Access the retrieved videos
    console.log('videos[]', res.data.videos);
  },
  err => {
    console.log('Error occurred', err);
  });

This approach should enhance performance with fewer loops and reduced call stack. Utilizing Array.map(handler) is recommended by the JavaScript community for its efficiency. Happy Coding!

Answer 3

Answer №2

To eliminate the Promise chaos come on in

ES2017 async/await structure

Revamp your entire code to resemble something like this

async function bar() {
    var userId = 'UCO1cgjhGzsSYb1rsB4bFe4Q'
    var link = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${userId}&part=snippet,id&order=date&maxResults=20`

    var response = await fetch(link)
    var info = await response.json()

    var videoIds = []
    for (var item of info.items)
        videoIds.push(item.id.videoId);

    var linksArr = []
    for (var id of videoIds)
        linksArr.push(`https://www.googleapis.com/youtube/v3/videos?part=statistics&id=${id}&key=${apiKey}`);

    for (var currentUrl of linksArr) { //This loop will pause at each URL to complete its fetch
        let response = await fetch(currentUrl)
        let info = await response.json()
        console.log(info)
    }
    return 'Well done Anakin, well done'
} 

bar()
.then(message => console.log(message))
.catch(error => console.log(error)) //If an error has been thrown or a fetch was rejected.

Answer 4

To eliminate the Promise chaos come on in

ES2017 async/await structure

Revamp your entire code to resemble something like this

async function bar() {
    var userId = 'UCO1cgjhGzsSYb1rsB4bFe4Q'
    var link = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${userId}&part=snippet,id&order=date&maxResults=20`

    var response = await fetch(link)
    var info = await response.json()

    var videoIds = []
    for (var item of info.items)
        videoIds.push(item.id.videoId);

    var linksArr = []
    for (var id of videoIds)
        linksArr.push(`https://www.googleapis.com/youtube/v3/videos?part=statistics&id=${id}&key=${apiKey}`);

    for (var currentUrl of linksArr) { //This loop will pause at each URL to complete its fetch
        let response = await fetch(currentUrl)
        let info = await response.json()
        console.log(info)
    }
    return 'Well done Anakin, well done'
} 

bar()
.then(message => console.log(message))
.catch(error => console.log(error)) //If an error has been thrown or a fetch was rejected.

Utilizing Javascript to make multiple API requests to fetch data from Youtube

update

Answer №1

Answer №2

Similar questions

An error occurred while attempting to save a new entry using the New Entry Form in DataTable, stating that the variable "

The SetInterval notifications remain stagnant without any alterations

Tips on transferring information from a component to an instance in Vue

What is the best way to deserialize a JSON document from std::map in C++ using Delphi?

Executing React's useEffect inside a loop will result in only the last effect being triggered

Manage and update events in the Angular Bootstrap Calendar

Is the Sourcecode for the Raspberry Pi Cam with WebRTC and UV4l driver Closed?

Troubleshooting: JavaScript Object isn't appending to array

How to Transfer Data from SuperAgent Library Outside the .then() Block?

Encountering a "Can't find variable" error in Java when using Ghostdriver 1.2.1 with PhantomJS 2.0 and the newest version

The swap feature in drag-and-drop does not have a defined function

Adding a new row to a table is causing issues with jQuery

The parameter in a JavaScript for loop

Using VueJS to perform a filtering operation on the JSON data when a button is clicked

the transparency feature in three.js is completely malfunctioning

What is the best way to send a JSON object in Vue.js?

Updating HTML content using jQuery by iterating through an array

Activate the front camera on an Android device using HTML5 or JavaScript

Managing the verification of data existence in the ExpressJS service layer or controller

Can you come up with a catchy one-liner for an array that contains all the elements of the arrays that came