Итерация объекта для создания выбора с группами опций - PullRequest
Новая
       33

Итерация объекта для создания выбора с группами опций

0 голосов
/ 05 февраля 2019

У меня есть такой объект: 

{
  "Administration": {
    "5756":"AdminRelease 1",
    "8238":"AdminRelease 2",
    "8239":"AdminRelease 3"
  },
  "Office": {
    "6016":"AndroidRelease 1",
    "6017":"AndroidRelease 2",
    "6044":"AndroidRelease 4",
    "6019":"AndroidRelease 5"
  }
}

Я пытаюсь повторить это в теге select в качестве раскрывающегося списка.Я пытаюсь создать группу параметров, скажем, Administration и Office, в которой у меня будет соответствующий список выпусков в виде раскрывающегося списка.

На данный момент я сделал следующее: 

<select id="releaseDropdown_${widgetId}" onChange="renderChartWithData_${widgetId}">
  #if(!$releasesList.isEmpty())
    #foreach($pName in $releasesList.keySet())
      <optgroup label="${pName}">
        #foreach($key in $releasesList.keySet())
          #if("${defaultRelease}" == "${key}")
            <option value="${key}"selected="selected">
          #else
            <option value="${key}">
          #end
          $releasesList.values().get(${key})
          </option>
        #end
      </optgroup>
    #end
  #else
    <option value="0">No Release</option>
  #end
</select>

Я новичок в пользовательском интерфейсе и не могу найти ошибку в своем коде.Если есть синтаксические или логические ошибки.

1 Ответ

0 голосов
/ 05 февраля 2019

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

var srcData = {
    "Administration":{
        "5756":"AdminRelease 1",
        "8238":"AdminRelease 2",
        "8239":"AdminRelease 3"
    },
    "Office":{
        "6016":"AndroidRelease 1",
        "6017":"AndroidRelease 2",
        "6044":"AndroidRelease 4",
        "6019":"AndroidRelease 5"
    }
};

Object.values(srcData).forEach((item, index) => {
  let wrapper = document.getElementById('wrapper');
  let label = Object.keys(srcData)[index];
  wrapper.innerHTML += `<label>${label}</label>`;
  let selectHTML = '<select>';
  Object.values(item).forEach((option, index) => {
    selectHTML +=`<option value="${Object.keys(item)[index]}">${option}</option>`;
  });
  wrapper.innerHTML += selectHTML+'</select>';
});
<div id="wrapper"></div>
...