Javascrip Filter Json file with the id of a dropdown list

user_3482833 0
Viewed 114

I'm having a hard week trying to filter a JSON file base on the id obtained from a dynamic created dropdown list

  • CSS Framework: Bootstrap;
  • JS Framework: Jquery and Bootstrap Js

What I'm trying to create is not using Jquery or Bootstrap Js. I'm trying to use Vanilla Js.

First:

I dynamically created the dropdown list, from a JSON file, and assign an id to each element

// DROPDOWN LIST FETCH JSON FILE
fetch('dropdown.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    let output = '';
    data.forEach(function (data) {
      output += `
          <a class="dropdown-item" href="#" id="${data.id}">${data.text}</a>
          `;
    });
    document.getElementById('div-dropdown-list').innerHTML = output;
  });

Then I need to output the information of other JSON files base on the ID Selected. In other to do this I' targeting the ID of the previous dropdown list with an Event Listener:

document.querySelector('#div').addEventListener('click', async (e) => {
  const idSelected = await e.target.id;
});

After that I'm targeting the JSON file with the data I would like to output base on the filtered id obtained.

async function json() {
  const response = await fetch('data.json');
  const data = await response.json();
  return data;
}

json().then(info => console.log(info));

How can I output the JSON data filter by the idSelected variable inside the document.querySelector('#div').addEventListener

json javascript
1 Answers

I could resolve the task with this line os code

let select = document.getElementById('Select');
let dropdown = '';

const showSelections = import('../metadata/dropdown.json').then(
  (module) => {
    const data = module.default;
    data.forEach((data) => {
      dropdown += `<option value="${data.id}">${data.value}</option>`;
    });
    div.innerHTML = dropdown;
  }
);

module.exports = showSelections;
user_34828330
Related