在javascript中使用百里香对象填充输入选择html时获取未定义

Question

我正在尝试在 javascript 中填充选项选择上的输入值和文本。数据来自 html 中的thymeleaf。

这是我想要存储在 javascript 中的源模型。

public class JobClassEntity {

  private String jobClassId;
  private String jobTypeId;
  private String jobClassName;

  public JobClassEntity(String jobClassId, String jobTypeId, String jobClassName) {
    this.jobClassId = jobClassId;
    this.jobTypeId = jobTypeId;
    this.jobClassName = jobClassName;
  }
 
  //getter & setter
}

这是我在控制器上的源代码。

   @GetMapping("/")
   public ModelAndView showCreateNewTml(ModelAndView m, Principal principal){

    User user = (User) ((Authentication) principal).getPrincipal();

    List<JobClassEntity> listJob = jobClassRepository.findAllAssetClass();
    m.addObject("jobclass", listJob);
    m.setViewName("timelines/create-new-timeline");

    return m;
}

listJob 包含 4 个数据（长度 listJob = 4）。这是我的部分代码页（test.html），其中来自控制器的数据传递到 .js

<script th:inline="javascript">
<![CDATA[*/

    var listJobC = /*[[${jobclass}]]*/ 'default';

>*/
</script>

在它传递给 javascript (test.js) 之后。我尝试填充数据以选择选项输入。 这是我的源代码 .js。

for(jobc in listJobC)
    {
       var opt = document.createElement("option");
       opt.value= jobc.jobClassId;
       opt.innerHTML = jobc.jobClassName;

       seljob.appendChild(opt);
    }

在我运行并测试后，选择显示，但值和文本填充有 undefined。这是option value的显示

Answer 1

我不认为for(jobc in listJobC) is doing what you think it is。当我测试该代码时，它只返回了数字0 和1，它们没有您要查找的属性...使用.forEach 或常规for 循环。

for (let i = 0; i < listJobC.length; i++) {
  jobc = listJobC[i];
  
  var opt = document.createElement("option");
  opt.value= jobc['jobClassId'];
  opt.innerHTML = jobc['jobClassName'];
  seljob.appendChild(opt);
}