asked on

How to perform MULTIPLE FETCH ON MORE THAN ONE XML FILES ?

in my previous question:
How to create an input search box for song names in an xml file ?
fetch was used on 1 xml file: 'a.xml'
Search was performed on 'a.xml'.

I would like to perform fetch on 3 xml files:
'a.xml', 'b.xml', 'c.xml'.
Goal: perform search on 3 xml files instead of only 1.

Working example:
http://mp3-music-depot.com/fetch-1-xml.html

Code:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>demo of dropdown list using xml element data in JavaScript</title>
    <script>
      let ul, sel;
      const build = val => {
        ul.innerHTML = "";
        const res = [...sel.options]
          .slice(1)  // get rid of please select
          .filter(
            opt => val === '' || opt.text.toLowerCase().includes(val))
          .map(opt => `<li>${opt.text}</li>`)

        if (res.length > 0) ul.innerHTML = res.join('');
      };
      const show = (e) => {
        const val = e.target.value.toLowerCase();
        build(val)
      };

      window.addEventListener('load', () => {
        sel = document.getElementById('mp3s');
        ul = document.getElementById('res');

        fetch('a.xml')
          .then(response => response.text())
          .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
          .then(doc => {
            const html = [...doc.querySelectorAll('Row')].map(row => `<option value="${row.querySelector('id').textContent}">${row.querySelector('mp3').textContent.replace(/\.mp3$/,'')}</option>`);
            sel.innerHTML += html.join('');
            build("a");
          });

        document.getElementById('btn').addEventListener('click', e => {
          const val = sel.value;
        //alert(sel.value);
          const text = sel.options[sel.selectedIndex].textContent;
        //alert(sel.options[sel.selectedIndex].textContent)
        
        //addition - begin 
           var myAudio = document.getElementById('my-audio');
      myAudio.src=sel.options[sel.selectedIndex].textContent +".mp3"
      //alert(myAudio.src)
      myAudio.play()
           
           //addition - end
        
          document.getElementById('selection').innerHTML = val ? `<b>${val}:</b> ${text}` : '';
        })
        document.getElementById('search').addEventListener('input', show);
      });

    </script>
   <div align="center"><audio id="my-audio" src="path/to/your/audio.mp3" type="audio/mpeg" controls ></audio></div>
  </head>

  <body>
    <select id="mp3s">
      <option value="">Please select from A List...</option>
    </select>
   <br>
    <input type="button" id="btn" value="Play" />
   <br><br>
   
    <label>Search: <input type="text" id="search" />
    <ul id="res"></ul>
    <hr />
    <span id="selection"></span>
   
   <br><br>
</body>
</html>