Блог

Главная - Вопросы по программированию - Сопоставить массив словарей для выбора выпадающего списка?

Сопоставить массив словарей для выбора выпадающего списка?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытаюсь сопоставить массив словарей с выпадающим списком выбора, но мой текущий подход просто выдает правильное количество параметров выбора без значений.

 This is what my array looks like:
dateArray = [
      {year:'2016', month: "01"},
      {year:'2017', month: "01"},
      {year:'2018', month: "02"},
      {year:'2018', month: "02"}
    ];

Вот как я пытаюсь сопоставить массив с выпадающими списками выбора:

             <select className='form-control'>
              {this.state.dateArray.map((year) => <option key={year.value} value={year.value}>{year.display}</option>)}
            </select>
            <select className='form-control'>
              {this.state.dateArray.map((month) => <option key={month.value} value={month.value}>{month.display}</option>)}
            </select>

Как я могу сопоставить свой массив словарей для выбора выпадающих списков?

Комментарии:

1. Я мог бы легко сделать это с помощью чего-то вроде ejs или django-templates , но я понятия не имею, как использовать reactjs! Если вы думаете, что это было бы полезно, я могу показать вам, хотя я сомневаюсь, что это было бы полезно.

2. Вы можете легко использовать цикл foreach. Вам пришлось бы модифицировать документ, используя DOM, хотя

Ответ №1:

Может быть, что-то вроде этого сработает:

 <select className='form-control'>
  {this.state.dateArray.map((item, i) => {return <option key={i} value={item.year}>{item.year}</option>})}
</select>
<select className='form-control'>
  {this.state.dateArray.map((item, i) => {return <option key={i} value={item.month}>{item.month}</option>})}
</select>

Ответ №2:

Этот код использует .foreach() цикл для перебора массива и .querySelectorAll() для выбора элемента. Затем он использует .innerHTML для добавления опции к выбору.

 let dateArray = [{
    year: '2016',
    month: "01"
  },
  {
    year: '2017',
    month: "01"
  },
  {
    year: '2018',
    month: "02"
  },
  {
    year: '2018',
    month: "02"
  }
];
let select = document.querySelectorAll(".form-control")[0];

dateArray.forEach(e => {
  select.innerHTML  = `<option key="${e.year}" value="${e.year}">${e.year}</option>`;
});  
 <select class='form-control'>

</select>