Как выбрать элемент без повторения в JavaScript

ProgramBox

Как выбрать элемент без повторения в JavaScript

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#javascript #html

Вопрос:

У меня есть скрипт веб-сайта, который будет считывать загруженный пользователем csv-файл и отображать его в таблице html.

Когда пользователь загружает свой csv-файл, мой скрипт автоматически добавляет новый столбец с именем Device и распространяет элемент списка в существующую запись csv.

Например, если пользователь загрузил файл csv, содержащий 4 записи, в Device столбец будут добавлены три серийных кода на основе этого списка:

var filterserial = ['K4Z7-9RFL-XCXS', 'TEIK-YMJF-4QQG', '4SB9-NR2D-742E', 'TY83-FPSX-C3WS', 'YVLM-W2T1-YNSI']

Пример:

ПРОБЛЕМА : При многократной попытке загрузить файл csv существует вероятность того, что серийный номер устройства будет дублирован. Поскольку все серийные номера устройств должны быть уникальными для каждого идентификатора, как я могу предотвратить дублирование серийного номера устройства? Заранее спасибо, например :

Полный код (HTML и JAVSCRIPT):

 <!DOCTYPE HTML>
<html>

<head>


  <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
</head>

<body>
  <div class="container">
    <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
    <div class="card">
      <div class="card-header"><b>Select Excel File</b></div>
      <div class="card-body">

        <input type="file" id="excel_file" />

      </div>
    </div>
    <div id="excel_data" class="mt-5"></div>
  </div>
</body>

</html>

<script>
  const excel_file = document.getElementById('excel_file');

function randomNoRepeats(array) {
  var copy = array.slice(0);
  return function() {
    if (copy.length < 1) { copy = array.slice(0); }
    var index = Math.floor(Math.random() * copy.length);
    var item = copy[index];
    copy.splice(index, 1);
    return item;
  };
}

var filterserial = ['K4Z7-9RFL-XCXS', 'TEIK-YMJF-4QQG', '4SB9-NR2D-742E', 'TY83-FPSX-C3WS', 'YVLM-W2T1-YNSI']
var chooser = randomNoRepeats(filterserial);


  excel_file.addEventListener('change', (event) => {

    if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
      document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

      excel_file.value = '';

      return false;
    }

    var reader = new FileReader();

    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event) {

      var data = new Uint8Array(reader.result);

      var work_book = XLSX.read(data, {
        type: 'array'
      });

      var sheet_name = work_book.SheetNames;

      var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {
        header: 1
      });

      if (sheet_data.length > 0) {
        var table_output = '<table class="table table-striped table-bordered">';

        for (var row = 0; row < sheet_data.length; row  ) {

          table_output  = '<tr>';
          if (row == 0) {
            table_output  = '<th>'   ['Device']   '</th>'
          } else {
                                table_output  = '<td>'   [chooser()]   '</td>'

          }

          for (var cell = 0; cell < sheet_data[row].length; cell  ) {

            if (row == 0) {

              table_output  = '<th>'   sheet_data[row][cell]   '</th>';

            } else {

              table_output  = '<td>'   sheet_data[row][cell]   '</td>';

            }

          }

          table_output  = '</tr>';

        }

        table_output  = '</table>';

        document.getElementById('excel_data').innerHTML = table_output;
      }

      excel_file.value = '';

    }

  });
</script>

1. поддерживайте a Set и каждый раз, когда вы добавляете новое устройство в таблицу, также добавляйте это устройство в набор и каждый раз перед добавлением устройства table проверяйте, не должно ли оно уже существовать Set … Или всякий раз , когда вы получаете новый список устройств от csv , удалите дубликаты, сравнив с Set , а также добавьте уникальный созданный список set , чтобы проверить это в следующий раз.

Ответ №1:

Как насчет перемещения инициализации выбора внутри прослушивателя изменений и определения его таким образом?

 var shuffledSerials = filterserial.slice(0).sort(() => return 0.5 - Math.random() );
var chooser = () => shuffledSerials.pop();

Таким образом, сериалы перемешиваются каждый раз, когда загружается новый файл, и средство выбора просто извлекает элементы из вновь созданного массива.

 <!DOCTYPE HTML>
<html>

<head>


  <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
</head>

<body>
  <div class="container">
    <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
    <div class="card">
      <div class="card-header"><b>Select Excel File</b></div>
      <div class="card-body">

        <input type="file" id="excel_file" />

      </div>
    </div>
    <div id="excel_data" class="mt-5"></div>
  </div>
</body>

</html>

<script>
  const excel_file = document.getElementById('excel_file');

  var filterserial = ['K4Z7-9RFL-XCXS', 'TEIK-YMJF-4QQG', '4SB9-NR2D-742E', 'TY83-FPSX-C3WS', 'YVLM-W2T1-YNSI'];


  excel_file.addEventListener('change', (event) => {

    if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
      document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

      excel_file.value = '';

      return false;
    }

        var shuffledSerials = filterserial.slice(0).sort(() => 0.5 - Math.random() );
        var chooser = () => shuffledSerials.pop();

    var reader = new FileReader();

    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event) {

      var data = new Uint8Array(reader.result);

      var work_book = XLSX.read(data, {
        type: 'array'
      });

      var sheet_name = work_book.SheetNames;

      var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {
        header: 1
      });

      if (sheet_data.length > 0) {
        var table_output = '<table class="table table-striped table-bordered">';

        for (var row = 0; row < sheet_data.length; row  ) {

          table_output  = '<tr>';
          if (row == 0) {
            table_output  = '<th>'   ['Device']   '</th>'
          } else {
                                table_output  = '<td>'   [chooser()]   '</td>'

          }

          for (var cell = 0; cell < sheet_data[row].length; cell  ) {

            if (row == 0) {

              table_output  = '<th>'   sheet_data[row][cell]   '</th>';

            } else {

              table_output  = '<td>'   sheet_data[row][cell]   '</td>';

            }

          }

          table_output  = '</tr>';

        }

        table_output  = '</table>';

        document.getElementById('excel_data').innerHTML = table_output;
      }

      excel_file.value = '';

    }

  });
</script>

1. Привет, спасибо за ваш ответ, но как я могу реализовать этот метод в своем коде? Можете ли вы показать мне реализацию, используя мой полный код? Спасибо.

2. @terry5546 Я изменил свой ответ.

Метки: Как выбрать элемент без повторения в JavaScript