Удалить дубликаты при добавлении опции в выпадающий

Question

Я динамически создал раскрывающиеся списки и заполнил их данными из массива json.

Данные:

data = [{hello: 'abc', asd: '123', fgh: '345' }, 
{hello: 'sdf', asd: '456', fgh: 'df' }, 
{hello: 'ty', asd: '789', fgh: '345675' },
{hello: 'qwe', asd: '123', fgh: '987' }]

массив ключей (для данных, которые мне нужны в раскрывающемся списке) : arr = ['asd', 'fgh']

Создание раскрывающегося списка:

arr.forEach(c => {
   $('div').append(`
     <div class='float-left'>
     <p>${c}</p>
     <select id='${c}'></select>
    </div>`);
});

Для заполнения раскрывающихся списков:

arr.forEach(o => {
   data.forEach(strs => {
      if (strs[o] != null) {
         $(`#${o}`).append(`<option value='${strs[o]}'>${strs[o]}</option>`);
      }
   });
});

Я могу заполнить раскрывающиеся списки. Как заполнить выпадающие списки с помощью БЕЗ ДУБЛИКАТОВ ?

Answer 1

Чтобы обработать дубликаты <select> элементов, вам не нужно добавлять в общий селектор c 'div'. Вместо этого я использую именованный класс .container.

Для обработки дубликатов <option> s я бы использовал метод массива .some()

data = [{hello: 'abc', asd: '123', fgh: '345' }, 
{hello: 'sdf', asd: '456', fgh: 'df' }, 
{hello: 'ty', asd: '789', fgh: '345675' },
{hello: 'qwe', asd: '123', fgh: '987' }]

arr = ['asd', 'fgh']

arr.forEach(c => {
   $('.container').append(`
     <div class='float-left'>
     <p>${c}</p>
     <select id='${c}'></select>
    </div>`);
});

arr.forEach(o => {
   data.forEach(strs => {
      if (strs[o] != null) {
      
      const alreadyHasThis = $(`#${o} option`).toArray().some(option => option.value === strs[o]);
                  
      if(!alreadyHasThis){
          $(`#${o}`).append(`<option value='${strs[o]}'>${strs[o]}</option>`);
      }
     
      }
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

Answer 2

Сначала вы можете использовать временный массив с выбранными вами данными, а [... new Set(data)] - для удаления дубликатов. Затем используйте этот массив для построения вашего контроля.

data = [{hello: 'abc', asd: '123', fgh: '345' }, 
{hello: 'sdf', asd: '456', fgh: 'df' }, 
{hello: 'ty', asd: '789', fgh: '345675' },
{hello: 'qwe', asd: '123', fgh: '987' }]

arr = ['asd', 'fgh']

var selects = arr.reduce((r, e) => (r[e] = [... new Set(data.map(d => d[e]))], r), {});

console.log(selects)

var html = ""
for (sel of arr) {
  html += `<div class='float-left'>${sel} <select id='${sel}'>`;
  for (data of selects[sel]) 
    html += `<option value='${data}'>${data}</option>`;
  html += `</select></div>`;
}
document.querySelector("div").insertAdjacentHTML("beforeend", html);

<div></div>

Ссылки: Как преобразовать массив объектов в один объект в JavaScript? https://medium.com/dailyjs/how-to-remove-array-duplicates-in-es6-5daa8789641c

Answer 3

Вы можете создать массив каждого из значений индексов объектов, указанных в arr, и удалить его, прежде чем использовать его для добавления параметров. Обратите внимание, что я объединил ваши две forEach петли; для этого необходимо добавить id к верхнему уровню div. Если вы не хотите этого делать, вам нужно будет снова разделить их.

data = [{hello: 'abc', asd: '123', fgh: '345' }, 
{hello: 'sdf', asd: '456', fgh: 'df' }, 
{hello: 'ty', asd: '789', fgh: '345675' },
{hello: 'qwe', asd: '123', fgh: '987' }]

arr = ['asd', 'fgh']

arr.forEach(o => {
  $('div#top').append(`
     <div class='float-left'>
     <p>${o}</p>
     <select id='${o}'></select>
    </div>`);
  let vals = data.map(strs => strs[o]);
  vals.filter((v, i) => v !== null && vals.indexOf(v) === i)
      .forEach(v => $(`#${o}`).append(`<option value='${v}'>${v}</option>`));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='top'></div>