Creating a Dropdown list by fetching data from backend

Question

I have created a course container and I want to populate the options by fetching them from the backend

(URL: https://ffcc-app.herokuapp.com/get/courses)

<div class="container">
        <form action="#" method="POST">
        <h2>Course 1</h2>
        <div class="select-box">
          <div class="options-container">
            <select class="option" id="one">
              <option value="">Select a course.. </option>
              
            </select>
          </div>
          <div class="selected">
            Select Courses
          </div>
          <div class="search-box">
            <input type="text" placeholder="Search..." />
          </div>
        </div>
        </form>
</div>

Also when I type any character in the search box it should filter the options. Can someone help me on how to fetch the data from the URL to populate the options list?

PS: I am familiar with Fetch API for fetching the data

Giovanni Esposito · Accepted Answer · 2021-08-03 14:56:43Z

1

You could do something like this:

let result = {};
let allCourses = {};

function filterCourses() {
  var filter = document.getElementById("inputFilter").value;
  result.courses = allCourses.courses.filter(x => x.title.includes(filter))
  let select = document.getElementById("one");
  
  while (select.firstChild) {
        select.removeChild(select.firstChild);
  }
  
  for (let i = 0; i < result.courses.length; i++){
        let option = document.createElement("option");
        option.value = result.courses[i]._id;
        option.text = result.courses[i].title;
        select.appendChild(option);
    }
}

async function getCourses() {
    let url = 'users.json';
    try {
        let res = await fetch("https://ffcc-app.herokuapp.com/get/courses");
        return await res.json();
    } catch (error) {
        console.log(error);
    }
}

async function renderCourses() {
    allCourses = await getCourses();
    result = Object.assign({}, allCourses);
    let select = document.getElementById("one");
    for (let i = 0; i < result.courses.length; i++){
        let option = document.createElement("option");
        option.value = result.courses[i]._id;
        option.text = result.courses[i].title;
        select.appendChild(option);
    }
}

renderCourses()

<div class="container">
            <form action="#" method="POST">
            <h2>Course 1</h2>
            <div class="select-box">
              <div class="options-container">
                <select class="option" id="one">
                  <option value="">Select a course.. </option>
                  
                </select>
              </div>
              <div class="selected">
                Select Courses
              </div>
              <div class="search-box">
                <input type="text" id="inputFilter" placeholder="Search..." onchange="filterCourses()"/>
              </div>
            </div>
            </form>
    </div>

Explanation: after loaded all the courses, I made an option for each course (with _id as option value and title as option text). This is made by function renderCourses.

Then the filterCourses function: basically it takes the value from input and looks for an option that contains what you typed in input. If you clean the input, function returns all the courses.

answered Aug 3, 2021 at 14:56

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sidharth Mishra Over a year ago

Thanks a lot this works just fine. I want to make the search case insensitive, so can u tell me how can I do that?

Giovanni Esposito Over a year ago

@SidharthMishra it's just necessary to use toUpperCase. So: allCourses.courses.filter(x => x.title.toUpperCase().includes(filter.toUpperCase()))

Sidharth Mishra Over a year ago

Yep got it! I guess it works for both either uppercase or lowercase right?

JPedro · Accepted Answer · 2021-08-03 15:04:09Z

0

You have to get your api, create a function to manipulate your DOM, pass the data to this function so that it renders the content inside the select tag.

This is just for the select tag.

const select = document.querySelector('.option')

fetch('https://ffcc-app.herokuapp.com/get/courses')
  .then(response => response.json())
  .then(data => {
    data.courses.forEach(course => render(course))
  });

function render(course) {
  const opt = document.createElement('option')
  opt.value = course.title
  const content = document.createTextNode(`${course.title}`)
  opt.appendChild(content)
  select.appendChild(opt)
}

<div class="container">
        <form action="#" method="POST">
        <h2>Course 1</h2>
        <div class="select-box">
          <div class="options-container">
            <select class="option" id="one">
              <option value="">Select a course.. </option>
              
            </select>
          </div>
          <div class="selected">
            Select Courses
          </div>
          <div class="search-box">
            <input type="text" placeholder="Search..." />
          </div>
        </div>
        </form>
</div>

answered Aug 3, 2021 at 15:04

JPedro

1

1 Comment

Giovanni Esposito Over a year ago

And the filter function? =)

Collectives™ on Stack Overflow

Creating a Dropdown list by fetching data from backend

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related