I am trying to log all title, href, and meta information on a youtube channels video tab. So I went to the chrome dev console and typed the code below. It currently logs the meta information right but the title and href just logs duplicates of previous loop. The way I am getting the title, href and meta information is correct the only issue is with the way I looped. I have a loop inside another loop because I want to log all the information of the same video in one line but while the title and href can be found with the same id the meta information is found with a different id. How can I fix my code so that I can correctly log the title, href and meta information of the same video in one line. Thanks in advance.
To replicate: go to youtube
=> go to a specific youtube channel
=> go to the video tab of their channel
=> (Optional) Write code to scroll all the way down, to get more data
=> Then paste in my code to console and run
$('.ytd-grid-video-renderer').find('#video-title').each(function() {
const v1 = $(this).attr('title')
$('.ytd-grid-video-renderer').find('#metadata-line').each(function() {
const v2 = $(this).text()
console.log(`title: ${v1}, meta: ${v2}}`)
})
})
update based on @james code: But there is still duplicates getting pushed to the array. How can the code be fixed so that duplicates don't get pushed to the array?
let myArr = []
$('.ytd-grid-video-renderer').each(function() {
const v1 = $(this).find('#video-title').attr('title');
const v2 = $(this).find('#metadata-line').text();
if (v1 && v2) {
myArr.push(`{title: ${v1}, meta: ${v2}}`)
}
})
console.log(myArr)
You want one set of output per "ytd-grid-video-renderer" I believe, so there should be a single loop over those elements.
document.querySelectorAll('.ytd-grid-video-renderer').forEach(function(el) {
const v1 = el.querySelector('#video-title');
const v2 = el.querySelector('#metadata-line');
if (v1 && v2) {
console.log(`title: ${v1.getAttribute("title")}, meta: ${v2.innerText}}`)
}
})