如何将Scala端处理的resultList发送至HTML页面指定div标签

第一步：修正现有Scala代码的基础问题 #

你当前的代码存在空指针风险：resultList初始赋值为null，直接调用+=方法会抛出空指针异常，同时字符串拆分逻辑没有处理多余空格、空片段问题，先修正数据解析逻辑：

import scala.collection.mutable

// 方法直接返回解析好的嵌套列表，方便后续传递
def getResultantValues(modelObject: String, keyName: String): mutable.MutableList[mutable.MutableList[String]] = {
  val resultList = mutable.MutableList[mutable.MutableList[String]]()
  val rawSplitRes = modelObject.replaceAll("\\[", "").split("]")
  for (i <- 0 until rawSplitRes.length) {
    // 清理每个拆分片段的前后空格、前置多余逗号，过滤空值
    val rowItems = rawSplitRes(i).trim.stripPrefix(",").split(",").map(_.trim).to(mutable.MutableList)
    if (rowItems.nonEmpty && rowItems.head.nonEmpty) {
      resultList += rowItems
    }
  }
  resultList
}

第二步：根据技术栈选择对应渲染方案 #

方案1：服务端模板直出（适合Play/Lift等Scala Web框架服务端渲染场景） #

直接在Controller层调用解析方法拿到resultList，将其作为模板变量传入HTML页面，在resultDiv标签内循环渲染内容即可，以Play框架的Twirl模板为例：

<div class="pagecolumn" style="background-color: #FFFFFF;">
  <button class="collapsible">Data Info</button>
  <div id="resultDiv">
    <!-- 直接循环嵌套列表，渲染成表格结构，可根据需求换成ul/ol列表、div块等任意结构 -->
    <table class="data-table">
      @for(row <- resultList) {
        <tr>
          @for(cellVal <- row) {
            <td>@cellVal</td>
          }
        </tr>
      }
    </table>
  </div>
</div>

方案2：异步接口渲染（适合前后端分离场景） #

• 后端将解析好的resultList序列化为JSON格式，通过HTTP接口返回，以Play框架的JSON序列化为例：

  import play.api.libs.json._
  import play.api.mvc._
  
  class DataController @Inject()(val controllerComponents: ControllerComponents) extends BaseController {
    def getResultData = Action {
      // 替换为你实际的modelObject、keyName取值
      val parsedData = getResultantValues(yourModelObjectStr, "targetKey")
      Ok(Json.toJson(parsedData))
    }
  }
  

• 前端页面加JS逻辑，页面加载完成后请求接口，拿到数据后动态插入到resultDiv中：

  <script>
  document.addEventListener('DOMContentLoaded', async () => {
    // 替换为你的后端接口实际路径
    const resp = await fetch('/api/getResultData')
    const dataList = await resp.json()
    const targetDiv = document.getElementById('resultDiv')
    
    // 组装要渲染的HTML内容，这里以表格为例，可按需调整结构
    let contentHtml = '<table class="data-table">'
    dataList.forEach(row => {
      contentHtml += '<tr>'
      row.forEach(cell => {
        contentHtml += `<td>${cell}</td>`
      })
      contentHtml += '</tr>'
    })
    contentHtml += '</table>'
    
    targetDiv.innerHTML = contentHtml
  })
  </script>
  

注意：如果你的数据中包含<、>、"这类特殊HTML字符，渲染前需要做转义，避免XSS风险和页面结构错乱。

内容的提问来源于stack exchange，提问作者Bharathram K