find all the items in the list and console.log them wuth url

September 27, 2022

I am trying to return all of the items in this html list (name and url_. I can console.log and find one item, but my console.log isn’t working to retrieve all of them at once.

document.getElementsByClassName('vxl-filelink-text');
var sampleX = document.getElementsByClassName('vxl-filelink-text');
sampleX[0].innerHTML;
sampleX[0].href;
//need a for loop to get all this data in the console


for (let i = 0; i < 5; i++) {
  text += "name and url";
}

<ul class="vxl-list vxl_1_105_435">
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">duck.png</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">bird.png</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">truck.png</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">car.jpg</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
</ul>

>Solution :

One way to do this is to build an array of text/link objects, you can then iterate that array to display all the values, or use it for any other purpose:

const links = document.getElementsByClassName('vxl-filelink-text');

const result = Array.from(links).map(n => ({ text: n.textContent, link : n.href }))

result.forEach(({ text, link }) => console.log(`${text}: ${link}`))

<ul class="vxl-list vxl_1_105_435">
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">duck.png</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">bird.png</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">truck.png</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
  <li>
    <div class="vxl-filelink">
      <div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">car.jpg</a>
      <div class="vxl-filelink-filesize vxl-body-small"></div>
    </div>
  </li>
</ul>