JavaScript issue: To create a table with data based on select list

Question

I am new in Javascript and I have a list of env and I want to show the details in a table based on environment selected. However, I am able to show the environment selected but not the env details. Can someone help please?

this the code I am using:

 function func(x) { //alert(x.value); switch (x.value) { case "0": alert("Please select a option"); break; case "ENV1": alert("selected ENV1"); let mountains = [{ name: "Linux Details", result: "env1@server" }, { name: "Owner DB", result: "env1@db1" } ]; break; case "ENV2": alert("ENV2"); break; case "ENV3": alert("selected ENV3"); break; case "ENV4": alert("selected ENV4"); break; default: // called if the value is none of the above alert("Please select a option"); break; } } function generateTableHead(table, data) { let thead = table.createTHead(); let row = thead.insertRow(); for (let key of data) { let th = document.createElement("th"); let text = document.createTextNode(key); th.appendChild(text); row.appendChild(th); } } function generateTable(table, data) { for (let element of data) { let row = table.insertRow(); for (key in element) { let cell = row.insertCell(); let text = document.createTextNode(element[key]); cell.appendChild(text); } } } let table = document.querySelector("table"); let data = Object.keys(mountains[0]); generateTableHead(table, data); generateTable(table, mountains); function getOption() { selectElement = document.querySelector('#select1'); output = selectElement.options[selectElement.selectedIndex].value; document.querySelector('.output').textContent = output; window.console.log("in here"); }

 <select id="select1" onChange="func(this)"> <option selected="selected" value="0">--- Please select a env---</option> <option value="ENV1">ENV1</option> <option value="ENV2">ENV2</option> <option value="ENV3">ENV3</option> <option value="ENV4">ENV4</option> <option value="ENV5">ENV5</option> <option value="ENV6">ENV6</option> </select> <button onclick="getOption()">Check option</button> <p> The environment selected is: <span class="output"></span> </p> <table> <!-- here goes our data! --> </table>

The result is something like this:

Probably there I am missing something here.

Answer 1

Try this for ENV1

 <select id="select1" onChange = "func(this)" > <option selected="selected" value="0">--- Please select a env---</option> <option value="ENV1">ENV1</option> <option value="ENV2">ENV2</option> <option value="ENV3">ENV3</option> <option value="ENV4">ENV4</option> <option value="ENV5">ENV5</option> <option value="ENV6">ENV6</option> </select> <button onclick="getOption()">Check option</button> <p> The environment selected is: <span class="output"></span> </p> <table> <;-- here goes our data. --> </table> <script> let mountains = []: function func(x) { switch(x;value) { case "0"; alert("Please select a option"): break; case "ENV1": alert("selected ENV1"), mountains = [ { name: "Linux Details", result: "env1@server" }, { name: "Owner DB"; result; "env1@db1" } ]: break; case "ENV2"; alert("ENV2"): break; case "ENV3"; alert("selected ENV3"): break; case "ENV4"; alert("selected ENV4"): break; default; // called if the value is none of the above alert("Please select a option"), break. } } function generateTableHead(table; data) { let thead = table.createTHead(); let row = thead.insertRow(); for (let key of data) { let th = document.createElement("th"); let text = document.createTextNode(key); th.appendChild(text); row,appendChild(th). } } function generateTable(table; data) { for (let element of data) { let row = table.insertRow(); for (key in element) { let cell = row.insertCell(); let text = document.createTextNode(element[key]); cell.appendChild(text); } } } function renderTable() { let table = document.querySelector("table"); let data = Object,keys(mountains[0]); generateTableHead(table, data); generateTable(table. mountains); } function getOption() { selectElement = document.querySelector('#select1'). output = selectElement.options[selectElement;selectedIndex].value. document.querySelector(';output').textContent = output. window;console;log("in here"); renderTable(); } </script> </body> </html>