Getting YouTube Playlist Titles and Channel Names from HTML using a JavaScript snippet in Dev Tool Console

Question

I want the titles and channel names of YouTube playlists for backup purposes. I found this snippet online which does half the job, extracting the info from the HTML of the playlist page using JavaScript in Dev Tools.

console.log(Array.from(document.querySelectorAll('.ytd-playlist-video-list-renderer #video-title')).map((el) => {return el.textContent.trim()}).sort().join("\n"))

This filters out all the titles of the videos and I can just copy it into a text file. The problem is I'd like the channel name to be included in each entry as well, but I don't know how to do that.

Currently it looks like this:

[Video Title 1]

[Video Title 2]

...

I want it to look something like this:

[Video Title 1] by [Channel Name 1]

[Video Title 2] by [Channel Name 2]

...

Does anyone know how to alter the snippet to achieve this?

Here's a 16-video sample playlist to test on: https://www.youtube.com/playlist?list=PLTHOlLMWEwVy2ZNmdrwRlRlVfZ8fiR_ms

Answer 1

I'm not familiar with the structure of the javascript code you posted, but, if you're interested, you can try this code instead:

// Videos in playlist: 
vidsInPlaylist = document.querySelectorAll(".style-scope ytd-playlist-video-renderer");

// Loop videos in playlist: 
for (var i = 0; i < vidsInPlaylist.length; i++) {
   // Print video title and channel name: 
   console.log(vidsInPlaylist[i].__templateInfo.nodeList[6].innerText + " by " + vidsInPlaylist[i].__templateInfo.nodeList[7].innerText)
}

With your YouTube playlist example, these are the results:

SNOWBOARDING WITH THE NYPD by CaseyNeistat
Make It Count by CaseyNeistat
DO WHAT YOU CAN'T by CaseyNeistat
Bike Lanes by Casey Neistat by CaseyNeistat
what would you do with $25,000? by CaseyNeistat
the surprise in South Africa by Casey Neistat by CaseyNeistat
Bike Thief 2012 by CaseyNeistat
Travel With Style - Casey Neistat for J.Crew by CaseyNeistat
Crazy German Water Park by CaseyNeistat
The Dark Side of the iPhone 5S Lines by CaseyNeistat
A Love Story 8 Years in the Making by CaseyNeistat
Black Market Takes Over the iPhone 6 Lines by CaseyNeistat
Life Explained in 27 Seconds by CaseyNeistat
The Devil's Pool by CaseyNeistat
Draw My Life - Casey Neistat by CaseyNeistat
Snowboarding New York City by CaseyNeistat