Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Populating HTML Combobox with Javascript and JSON Files

birdman24

New Coder
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON Test</title>
</head>
<body>
    <div id="myData">
<p>Reference Documents</p>
    <select name="ComboRefDocs" id="ComboRef">
    <option selected value="">Select Desired Document</option>
    </select>

<p>Minutes Documents</p>
    <select name="ComboMinsDocs" id="ComboMins">
    <option selected value="">Select Desired Document</option>
    </select>

<p>Forms Documents</p>
    <select name="ComboFormsDocs" id="ComboForms">
    <option selected value="">Select Desired Document</option>
    </select>

<p>Financial Documents</p>
    <select name="ComboFinDocs" id="ComboFin">
    <option selected value="">Select Desired Document</option>
    </select>
</div>

<script>
let url = "FormsDocs.json";
let comboName = "ComboForms";
loademup();

url = "ReferenceDocs.json";
comboName = "ComboRef";
loademup();

url = "FinancialDocs.json";
comboName = "ComboFin";
loademup();

url = "MinutesDocs.json";
comboName = "ComboMins";
loademup();


function loademup()
{
 fetch(url)
            .then(function (response) {
                return response.json();
        alert('Finished reading input file: ' + url);
            })
            .then(function (data) {
                appendData(data);
        alert('Finished adding items to combobox for file: ' + url);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
        function appendData(data) {

let ele = document.getElementById(comboName);
            for (var i = 0; i < data.length; i++) {
            ele.innerHTML = ele.innerHTML +
                '<option value="' + data[i]['filename'] + '">' + data[i]['itemvalue'] + '</optioin>';

            }
        }
}
</script>

 
</body>
</html>
I am attempting to populate four HTML comboboxes using Javascript to read JSON files containing the combobox values. The four files are being read and the values are being populated but they are being populated into one box instead of the four desired. What is strange is that the box being populated is the last one used in the call function within the script. I set a variable with the URL of the JSON file (which it working as all four files are read) and another variable with the name of the combobox to update. This is where the problem is as the last box called has all of the entries from the four files. I am sure it is something simple but I haven't put my finger on it.
 
An update since I posted. I added a line after "Function loademup() of "Let a = comboName;" and then changed the get.elementById(comboName) to get.elementById(a) and it worked. All combo box items were loaded to the proper combobox. Now the question is why that worked or why the initial way didn't?
 

New Threads

Buy us a coffee!

Back
Top Bottom