title: Fetching data from backend to create a dropdown list in Javascript
body: <p>Here is my course container snippet. I want to create a dropdown list of all the courses by fetching data from the backend (URL: <a href="https://ffcc-app.herokuapp.com/get/courses" rel="nofollow noreferrer">https://ffcc-app.herokuapp.com/get/courses</a>)
  In the snippet, I have manually put some dummy courses</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
          &lt;form action="#" method="POST"&gt;
          &lt;h2&gt;Course 1&lt;/h2&gt;
          &lt;div class="select-box"&gt;
            &lt;div class="options-container"&gt;
              &lt;div class="option"&gt;
                  &lt;input type="radio" class="radio" id="film" name="category" value="film" /&gt;
                  &lt;label for="Course 2"&gt;Course 1&lt;/label&gt;
                &lt;/div&gt;
              &lt;div class="option"&gt;
                &lt;input type="radio" class="radio" id="dance" name="category" value="dance" /&gt;
                &lt;label for="Course 2"&gt;Course 2&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="option"&gt;
                &lt;input type="radio" class="radio" id="science" name="category" value="science" /&gt;
                &lt;label for="Course 3"&gt;Course 3&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="option"&gt;
                &lt;input type="radio" class="radio" id="art" name="category" value="art"/&gt;
                &lt;label for="Course 4"&gt;Course 4&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="option"&gt;
                &lt;input type="radio" class="radio" id="music" name="category" value="music"/&gt;
                &lt;label for="Course 5"&gt;Course 5&lt;/label&gt;
              &lt;/div&gt; 
              
            &lt;/div&gt;
            &lt;div class="selected"&gt;
              Select Courses
            &lt;/div&gt;
            &lt;div class="search-box"&gt;
              &lt;input type="text" placeholder="Search..." /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;        </code></pre>
  </div>
  </div>
  </p>
  <p>I have created a search box to filter the course list and display the filtered list when you type any character.
  <strong>When you select any course it should replace &quot;Selected&quot; class value with the selected course's name</strong></p>
  <p>I tried to fetch data from the backend using Fetch API, here is my code snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const point = 'https://ffcc-app.herokuapp.com/get/courses';
  
  let courses1 =[];
  
  fetch(point)
      .then(response =&gt; response.json())
      .then(data =&gt; courses1=data.courses)
  
  function findMatches(wordToMatch , courses1){
      return courses1.filter(function place(a){
          const regex = new RegExp(wordToMatch,'gi')
          return a.code.match(regex) || a.title.match(regex)
      });
  }
  
  function displayMatches(){
      const matchArray = findMatches(this.value, courses1)
      const html = matchArray.map(place =&gt; {
          const regex = new RegExp(this.value, 'gi');
          const code = place.code.replace(regex, `&lt;span class="hl"&gt;${this.value}&lt;/span&gt;`);
          const title = place.title.replace(regex, `&lt;span class="hl"&gt;${this.value}&lt;/span&gt;`);
          return `
          &lt;div class="option"&gt;
                &lt;input type="radio" class="radio" name="category" /&gt;
                &lt;label for="course-1"&gt; ${code} , ${title} , ${place.credits} , ${place.type}&lt;/label&gt;
          &lt;/div&gt;
          `
      }).join("");
      opt.innerHTML = html;
  }
  const search = document.querySelector(".search-box");
  const opt = document.querySelector(".options-container");
  search.addEventListener("change",displayMatches);
  search.addEventListener("keyup",displayMatches);</code></pre>
  </div>
  </div>
  </p>
  <p>Though I am able to fetch it, I am not getting my desired output, also I cannot figure out a way to replace the &quot;Selected&quot; class value with the courses' value.</p>
  <p>Can someone help me in this? I would appreciate it if you also used Fetch API for fetching the data.</p>