Create dropdown menu that replaces href with a certain json file

Question

Context: I'm trying to create a simply project (a decision tree) and I'd like to know how could I create a drop down menu so that the user can select a specific option and retrieve a output from a json file.

This is the HTML code:

decisiontree.create(
  window.location.href.replace(/\/.*\.html$/, 'coronary.json'),
  document.getElementById('output'),
  document.getElementById('status')
);

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
  <title>Decision Tree</title>
  <script src="https://cdn.jsdelivr.net/npm/html-decision-tree/dist/decisiontree.js"></script>
  <link rel="stylesheet" href="../styles/tree.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <div class="content">
    <header>
      <h1> Knowledge-Based Decision Tree </h1>
    </header>
    <main class="main-content">

      <div id="status">
        <select id="selection">
          <option value="coronary.json"> Hypertension Decision Tree </option>
          <option value="diabetes.json"> Diabetes Decision Tree </option>
        </select>
      </div>
      <div id="output"></div>
    </main>
  </div>
</body>
</html>

As you can see, I'm only allowing the user to access the 'coronary.json' file, but I'd like to allow the user to have some flexibility and select from a range of options from a dropdown menu. How could I make it so that the user selects an option and is then passed on the window.location.href.replace... to use the information of a given file?

I believe I'd have to create some kind of querySelector to retrieve the values of each option and then pass this values onto the window.location.href, but I'm not sure how I could do that

Thank you in advance!

Loading a page with "json" value(s) which are typically just a string rather than HTML seems a bit odd - perhaps you can elaborate on that use case. — Mark Schultheiss, Jan 18 '22 at 14:16
Hello, Mark! Thank you for your input, I'll post the commend I made below: "Since this is a small project and the JSON files are in the same folder of the .html file, I'd basically like to pass the values from each option and pass it to the window.location.href.replace(/\/.*\.html$/, selectedValue). I'll pretty much create several JSON files and then the values from each option can be passed (if the user selects Hypertension Decision Tree, then the selectedValue would become coronary.json and this would be passed on the window.location.href.replace(/\/.*\.html$/, 'coronary.json')" — , Jan 18 '22 at 15:29
Essentially, if I edit this piece of code `window.location.href.replace(/\/.*\.html$/, 'coronary.json')`, it shows the decision tree from the json file (which is the Hypertension Decision Tree). If I then change it to `'diabetes.json'` it goes to another json file (Diabetes Decision Tree) — , Jan 18 '22 at 15:31

Steven Sewell · Accepted Answer · 2022-01-18T14:21:36.083

To listen to change events on your select element you can observe changes like so:

const selectElement = document.querySelector('#selection');

const initialValue = selectElement.value;

console.log('initial value:', initialValue);

selectElement.addEventListener('change', (event) => {
  const selectedValue = event.target.value;
  //your logic goes here
  console.log('selection changed:', selectedValue)
});

<select id="selection">
  <option value="coronary.json"> Hypertension Decision Tree </option>
  <option value="diabetes.json"> Diabetes Decision Tree </option>
</select>

Alternatively, and this is probably the better approach, you may want to add a button with an onclick event:

function generateDecisionTree() {
  const selectedValue = document.querySelector('#selection').value;

  //your logic goes here
  console.log("Selected value:", selectedValue)
}

<select id="selection">
  <option value="coronary.json"> Hypertension Decision Tree </option>
  <option value="diabetes.json"> Diabetes Decision Tree </option>
</select>
<button onclick=generateDecisionTree()>Generate decision tree</button>

If the library function decisiontree.create takes URLs then you can likely give it the value ./${selectedValue } (assuming you're hosting your JSON files in the same folder as your HTML file) or maybe the full URL (eg: http://localhost:8000/${selectedValue}) and the 2 DOM elements.

If it takes a JS object containing data from your JSON file then you may need to use something like the fetch API:

fetch(`./${selectedValue }`)
  .then(response => response.json())
  .then(data => decisiontree.create(data,
    document.getElementById('output'),
    document.getElementById('status')));

Thank you for your input! Since this is a small project and the JSON files are in the same folder of the .html file, I'd basically like to pass the values from each option and pass it to the `window.location.href.replace(/\/.*\.html$/, selectedValue)`. I'll pretty much create several JSON files and then the values from each option can be passed (if the user selects `Hypertension Decision Tree`, then the selectedValue would become `coronary.json` and this would be passed on the `window.location.href.replace(/\/.*\.html$/, 'coronary.json')` — , Jan 18 '22 at 15:27
Fixed it by simply putting the `window.location.href.replace(/\/.*\.html$/, selectedValue)` inside your `decisionTreeGenerator`! Thank you :) — , Jan 18 '22 at 15:49

Create dropdown menu that replaces href with a certain json file

1 Answers1