Estoy tratando de agregar las mismas opciones a cada cuadro desplegable enumerado, pero las opciones solo se agregan a la primera caída.

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);




                }
            }
        };

Esto debería mostrar las mismas opciones para todos los cuadros de selección en la página. Aquí hay un enlace a una página en vivo en Repl.it https://repl.it/@ Matteubanks / herramienta de mapeo de vainilla. Añadí un CSV que debería poder ahorrar en un archivo de Excel y luego cargar en el sistema.

0
Matt 26 jun. 2019 a las 01:17

1 respuesta

La mejor respuesta

Me tomó un momento entender lo que estás buscando. Parece que planea importar un archivo CSV y leer la línea de encabezado. A continuación, desea poder asignar los encabezados de la columna en su aplicación.

Considere el siguiente código. He poblado variables, suponiendo que todos los datos se han importado desde el CSV y JSON ya /

$(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>

Como puede ver, Itime sobre cada fila de datos JSON y haga la fila de la tabla de ella. Dado que queremos campos para cada selecto, le itamos sobre nuestros datos de campo cada uno, creando nuevos elementos <option>. También podemos configurar la propiedad selected de cada una si hay una coincidencia en los datos de JSON ya.

Incluí un data-col-id en caso de que necesite usar ese índice versus el nombre de la columna para el mapeo.

Espero que esto ayude.

1
Twisty 26 jun. 2019 a las 00:15