Logging data found with different id's on the same line

Question

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)

`urls2 = $$('div');` This returns all divs on the whole page, not those that are within a parent container. Not sure what `$$` is, jQuery? If so, try `urls2 = $$(v).find('div')` — James, Sep 06 '22 at 19:58
@James take a look at my updated code. Same problem but modern jquery — seriously, Sep 06 '22 at 20:20
Are you trying to locate the divs within the h3? Right now your line starting with `$('div').find` is going to pull all divs from the whole page. — James, Sep 06 '22 at 20:22

James · Accepted Answer · 2022-09-06T20:52:47.273

1

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}}`)
  }
})

edited Sep 06 '22 at 20:52

answered Sep 06 '22 at 20:34

James

20,957
5
26
41

it kinda works. It gets the data correctly but there is a lot of ```title: undefined, meta: ``` results. Can you set an if statement to validate of the required element exists first? – seriously Sep 06 '22 at 20:43
can you please take a look at the update above – seriously Sep 06 '22 at 20:50
I removed the jquery. Now it checks if the video-title and the metadata-line exist and only displays something if they both do. – James Sep 06 '22 at 20:53
This works perfectly but when I push it to an array duplicates get pushed in. How can I avoid that? Or is the better way to filter the array then remove duplicates? – seriously Sep 06 '22 at 21:00
Please check https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates – James Sep 06 '22 at 23:16

Logging data found with different id's on the same line

1 Answers1