How to append the same options to multiple select drop down boxes?

Question

I am trying to add the same options to each drop down box listed but the options are only being added to the first drop down.

function loadIgorMap() {
    $.getJSON('./iGorMap.json', function (data) {
        theData = data;
        for (var i = 0; i < data.length; i++) {
            $('.tableBody').append(`<tr>
                <td>${data[i].FiduciaryOutsourcingField}</td>
                <td>
                    <select class="browser-default custom-select" id="dropdown">
                        <option value="NA" class="N/A" hidden> -- Select --</option>
                    </select>
                </td>`)

        }
    })
}

window.onload = function () {


            for (let j = 0; j < theData.length; j++) {

                console.log('I am here')
                console.log(theData)

                let option;
                for (let i = 0; i < jsonKeys.length; i++) {
                    option = document.createElement('option');
                    option.text = jsonKeys[i];
                    // console.log(jsonKeys[i])
                    // option.value = jsonKeys[i].abbreviation;
                    dropdown.add(option);




                }
            }
        };

This should display the same options for all select boxes on the page. Here is a link to a live page on repl.it https://repl.it/@MattEubanks/Vanilla-Mapping-Tool. I added a CSV that you should be able to save in an excel file and then load into the system.

Answer 1

It seems you plan to import a CSV file and read the Header line. You then want to be able to map the Column Headers in your app.

Consider the following code. I populated variables, assuming all the data has been imported from the CSV and JSON already:

$(function() {
  // Field Data read in from CSV
  var fields = ["First Name", "Middle Name", "Last Name", "Suffix", "Address 1", "Address 2", "City", "State", "Zip Code", , , , , , , , , , , , ];
  // JSON Data for selections
  var myData = [{
      "FiduciaryOutsourcingField": "EIN",
      "YourField": ""
    },
    {
      "FiduciaryOutsourcingField": "Location",
      "YourField": ""
    },
    {
      "FiduciaryOutsourcingField": "TaxId",
      "YourField": ""
    },
    {
      "FiduciaryOutsourcingField": "FirstName",
      "YourField": "First Name"
    },
    {
      "FiduciaryOutsourcingField": "MiddleName",
      "YourField": "Middle Name"
    },
    {
      "FiduciaryOutsourcingField": "LastName",
      "YourField": "Last Name"
    }
  ];

  function readData(dObj, tObj) {
    $.each(dObj, function(key, row) {
      var newRow = $("<tr>").appendTo(tObj);
      var f1 = $("<td>").html(row.FiduciaryOutsourcingField).appendTo(newRow);
      var f2 = $("<td>").appendTo(newRow);
      var s1 = $("<select>").appendTo(f2);
      $("<option>").html("-- Select --").appendTo(s1);
      $.each(fields, function(i, v) {
        $("<option>", {
          selected: (row.YourField == v ? true : false),
          "data-col-it": i
        }).html((v != undefined ? v : "(Col-" + i + ")")).appendTo(s1);
      });
    });
  }

  readData(myData, $(".tableBody"));
});

.tableHeader {
  width: 300px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container col-md-">
  <div>
    <table class="table table-bordered table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Fiduciary Outsourcing Field</th>
          <th scope="col">Your Fields</th>
        </tr>
      </thead>
      <tbody class="tableBody"></tbody>
    </table>
  </div>
</div>

As you can see, I iterate over each row of JSON data and make the Table Row from it. Since we want fields for each Select, we iterate over our field data each pass, creating new <option> elements. We can also set the selected property of each if there is a match in the JSON data already.

I included a data-col-id in case you need to use that index versus the column name for mapping.